diff --git a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx
index 531d3b2a4..80b5e8e9e 100644
--- a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx
@@ -85,7 +85,7 @@ export function LegendValues({
const longestLegendNameWidth = useMemo(() => {
return legendData.reduce((previous, current) => {
const estimatedLegendNameWidth = estimateStringWidth(
- `${seriesNameFormatter(`${current.name || ''}`)}`,
+ current.name,
characterWidths,
);
@@ -95,7 +95,7 @@ export function LegendValues({
return previous;
}, 0);
- }, [legendData, seriesNameFormatter, characterWidths]);
+ }, [legendData, characterWidths]);
const longestLegendValueWidth = useMemo(() => {
return legendData.reduce((previous, current) => {
diff --git a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/tests/LegendValues.test.tsx b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/tests/LegendValues.test.tsx
new file mode 100644
index 000000000..d4b951708
--- /dev/null
+++ b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/tests/LegendValues.test.tsx
@@ -0,0 +1,28 @@
+import {mount} from '@shopify/react-testing';
+
+import {LegendValues} from '../LegendValues';
+
+const mockProps = {
+ data: [
+ {
+ name: 'Shopify Payments',
+ data: [{key: 'april - march', value: 50000}],
+ },
+ ],
+ activeIndex: 1,
+ legendFullWidth: false,
+ labelFormatter: (val) => `${val}!`,
+ getColorVisionStyles: jest.fn(),
+ getColorVisionEventAttrs: jest.fn(),
+ seriesNameFormatter: (val) => `${val}!`,
+ renderHiddenLegendLabel: jest.fn(),
+} as any;
+
+describe('', () => {
+ it('renders a table', async () => {
+ const legendValues = mount();
+ expect(legendValues).toContainReactComponent('table', {
+ style: {maxWidth: 197.22, width: '100%'},
+ });
+ });
+});