diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
index 61c4d0443..b29cc161b 100644
--- a/packages/polaris-viz/CHANGELOG.md
+++ b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
-
+## Unreleased
+
+### Fixed
+
+- Fixed issue in `` where the trend indicator was not being positioned correctly when the value was `null`.
## [15.8.0] - 2025-01-16
diff --git a/packages/polaris-viz/src/components/SimpleBarChart/stories/playground/NoTrendTight.stories.tsx b/packages/polaris-viz/src/components/SimpleBarChart/stories/playground/NoTrendTight.stories.tsx
new file mode 100644
index 000000000..121903f55
--- /dev/null
+++ b/packages/polaris-viz/src/components/SimpleBarChart/stories/playground/NoTrendTight.stories.tsx
@@ -0,0 +1,65 @@
+import type {Story} from '@storybook/react';
+
+import {SimpleBarChart, SimpleBarChartProps} from '../../../../components';
+import {META} from '../meta';
+import type {SimpleBarChartDataSeries} from '../../types';
+import {
+ DEFAULT_THEME_NAME,
+ PolarisVizProvider,
+} from '@shopify/polaris-viz-core';
+
+export default {
+ ...META,
+ title: `${META.title}/Playground`,
+};
+
+const DATA: SimpleBarChartDataSeries[] = [
+ {
+ name: '',
+ data: [
+ {key: 'One', value: 6000},
+ {key: 'Two', value: 5300},
+ ],
+ metadata: {
+ trends: {
+ '0': {},
+ },
+ },
+ },
+ {
+ name: '',
+ data: [
+ {key: 'One', value: 4500},
+ {key: 'Two', value: 1500},
+ ],
+ },
+];
+
+const Template: Story = () => {
+ const svgStyle = `
+ svg {
+ background: rgba(0, 255, 0, 0.1);
+ }
+ `;
+
+ return (
+
+ );
+};
+
+export const NoTrendTight = Template.bind({});
diff --git a/packages/polaris-viz/src/components/SimpleBarChart/utilities.ts b/packages/polaris-viz/src/components/SimpleBarChart/utilities.ts
index b3f96135a..a9661973e 100644
--- a/packages/polaris-viz/src/components/SimpleBarChart/utilities.ts
+++ b/packages/polaris-viz/src/components/SimpleBarChart/utilities.ts
@@ -1,6 +1,7 @@
import {HORIZONTAL_BAR_LABEL_OFFSET} from '@shopify/polaris-viz-core';
import {
+ TREND_INDICATOR_NO_VALUE_WIDTH,
estimateTrendIndicatorWidth,
TREND_INDICATOR_FONT_WEIGHT,
} from '../TrendIndicator';
@@ -24,15 +25,18 @@ export function getLongestTrendIndicator(
for (const [index, trend] of trendEntries) {
const dataPoint = seriesData[index];
- if (trend == null || trend.value == null || dataPoint?.value == null) {
+ if (trend == null || dataPoint?.value == null) {
return longestTrendIndicator;
}
- const trendStringWidth = estimateTrendIndicatorWidth(
- trend.value,
- fontSize,
- TREND_INDICATOR_FONT_WEIGHT,
- ).totalWidth;
+ const trendStringWidth =
+ trend.value == null
+ ? TREND_INDICATOR_NO_VALUE_WIDTH
+ : estimateTrendIndicatorWidth(
+ trend.value,
+ fontSize,
+ TREND_INDICATOR_FONT_WEIGHT,
+ ).totalWidth;
// Positive value
if (dataPoint.value > 0) {
diff --git a/packages/polaris-viz/src/components/TrendIndicator/index.ts b/packages/polaris-viz/src/components/TrendIndicator/index.ts
index d8d9cb194..4e8e412bb 100644
--- a/packages/polaris-viz/src/components/TrendIndicator/index.ts
+++ b/packages/polaris-viz/src/components/TrendIndicator/index.ts
@@ -3,3 +3,4 @@ export type {TrendIndicatorProps} from './TrendIndicator';
export {estimateTrendIndicatorWidth} from './utilities/estimateTrendIndicatorWidth';
export {HEIGHT as TREND_INDICATOR_HEIGHT} from './constants';
export {FONT_WEIGHT as TREND_INDICATOR_FONT_WEIGHT} from './constants';
+export {NO_VALUE_WIDTH as TREND_INDICATOR_NO_VALUE_WIDTH} from './constants';