`<DonutChart />`

There are loads of ways to use the <DonutChart /> component.

Basic Usage

export const MyApp = () => {
  return (
    <>
      <h2>My Chart</h2>
      <DonutChart data={[50, 100, 30]} />
    </>
  );
};

Let's add some labels:

<DonutChart
  data={[50, 100, 30]}
  labels={['1st', '2nd', '3rd']} 
/>

And let's make the output SVG smaller - half the default size:

<DonutChart
  data={[50, 100, 30]}
  labels={['1st', '2nd', '3rd']}
  size={150} 
/>

Built In Styling

There's a bunch of built-in options for styling the charts!

Color

The fillColors parameter allows filling of donut slices with corresponding indexes.

<DonutChart
  data={[50, 100, 30]}
  labels={['1st', '2nd', '3rd']}
  fillColors={["cyan", "magenta", "cyan"]} 
/>

Colors will wrap if there are more slices than colors, which makes alternating colors trivial!

<DonutChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  fillColors={["cyan", "magenta"]} 
/>

Stroke

Of course the slice outlines can also be customized via strokeColors & strokeWidths, both also wrapping:

<DonutChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  fillColors={["cyan", "magenta"]}
  strokeColors={["magenta", "cyan"]} 
  strokeWidths={[3]} 
/>

Gradients

Not only that but gradients are fully supported by default.

<DonutChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  gradientColors={[ 
    'oklch(0.7017 0.3225 328.36)', 
    'oklch(0.9054 0.15455 194.769)', 
  ]} 
  gradientDirection={'left-to-right'} 
/>

You can also change the stops for colors by supplying a percentage along with each color in the format color:% like so:

<DonutChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  gradientColors={[
    'gray:33%', 
    'yellow:33%', 
    'yellow:66%', 
    'gray:66%', 
    'gray:100%', 
  ]}
  gradientDirection={'left-to-right'}
/>

I've also added support for instead having a continuous shared gradient!

<DonutChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  gradientColors={[
    'oklch(0.7017 0.3225 328.36)',
    'oklch(0.9054 0.15455 194.769)',
  ]}
  gradientDirection={'left-to-right'}
  gradientMode="continuous"
/>

Donutchart Examples