Add padAngle to DonutChart

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 -->
+## Unreleased
+
+### Changed
+
+- Added padding between slices in `<DonutChart />` to improve visibility of small values.
 
 ## [16.15.2] - 2025-05-02
 

packages/polaris-viz/src/components/DonutChart/Chart.tsx

@@ -166,7 +166,8 @@ export function Chart({
 
   const createPie = pie<DataPoint>()
     .value(({value}) => value!)
-    .sort(null);
+    .sort(null)
+    .padAngle(0.05);
   const pieChartData = createPie(points);
   const isEveryValueZero = points.every(({value}) => value === 0);
   const emptyState = pieChartData.length === 0 || isEveryValueZero;

packages/polaris-viz/src/components/DonutChart/stories/TinySlices.stories.tsx

@@ -0,0 +1,40 @@
+import type {Story} from '@storybook/react';
+
+import {META} from './meta';
+
+import type {DonutChartProps} from '../DonutChart';
+
+import {DEFAULT_PROPS, Template} from './data';
+
+export default {
+  ...META,
+  title: 'polaris-viz/Chromatic/Charts/DonutChart',
+  parameters: {
+    ...META.parameters,
+    chromatic: {disableSnapshot: false},
+  },
+};
+
+export const TinySlices: Story<DonutChartProps> = Template.bind({});
+
+TinySlices.args = {
+  ...DEFAULT_PROPS,
+  data: [
+    {
+      name: 'Shopify Payments',
+      data: [{key: 'april - march', value: 5000000}],
+    },
+    {
+      name: 'Paypal',
+      data: [{key: 'april - march', value: 250}],
+    },
+    {
+      name: 'Other',
+      data: [{key: 'april - march', value: 1000000}],
+    },
+    {
+      name: 'Amazon Pay',
+      data: [{key: 'april - march', value: 400}],
+    },
+  ],
+};