fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[ChartsV9] Add DataVizGradientPalette to DonutChart

Open shawn-grant opened this issue 1 year ago • 0 comments

Implemented DataVizGradientPalette and rounded corners to v9 DonutChart

New Behavior

image

Notable Changes:

  • Added DataVizGradientPalette in utilities/gradients.ts
  • Replaced color property with gradient in IDataPoint

New Usage

const data: IChartProps = {
  chartData: [
    {
      legend: 'first',
      data: 20000,
      // new `gradient` prop
      gradient: getGradientFromToken(DataVizGradientPalette.gradient1),
    },
    {
      legend: 'second',
      data: 39000,
      // custom gradient
      gradient: [ '#ff88cc', '#db3794' ],
    },
  ],
};

// ... in render method
<DonutChart
  data={data}
  // ... other props
/>

shawn-grant avatar Oct 08 '24 19:10 shawn-grant