Donut Chart

Usage

import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector } from "recharts"

<Chart.Root chart={chart}>
  <PieChart>
    <Pie shape={(props) => <Sector {...props} />} />
  </PieChart>
</Chart.Root>

Examples

Point Label

To display a point label on the chart, use the PointLabel component from recharts.

Start and End Angle

Customizing the startAngle and endAngle prop of the <Pie> component can create partial donuts.

<Pie startAngle={180} endAngle={0}>
</Pie>

Angle Padding

To add some space between the segments, use the paddingAngle prop.

Pro Tip: To round the corners of the segments, use the cornerRadius prop.

Detached Segment

To create an effect where the active segment is scaled and detached from the rest of the segments, use the activeIndex prop and the activeShape prop.

<Pie
  innerRadius={60}
  outerRadius={100}
  activeIndex={0}
  activeShape={<Sector outerRadius={120} />}
/>

Centered Text

Use the Chart.RadialText component to display a centered text on the chart with an optional description.

<Label
  content={({ viewBox }) => (
    <Chart.RadialText viewBox={viewBox} title={1200} description="users" />
  )}
/>