DonutChart

Donut and pie charts for displaying proportional data with interactive hover states and optional center content.

Playground

Experiment with different settings:

<DonutChart
  data={data}
  theme="midnight"
  size={220}
  innerRadius={0.6}
  showLegend
  legendPosition="right"
  padAngle={2}
/>

With Center Content

<DonutChart
  data={data}
  dataKey="visits"
  labelKey="source"
  theme="midnight"
  centerContent={
    <div>
      <div className="text-2xl font-bold">11.5K</div>
      <div className="text-sm text-muted">Total</div>
    </div>
  }
/>

Pie Chart

Set innerRadius to 0 for a traditional pie chart:

Props