Donut Chart

Used to display data as segments of a circular chart that looks like a donut

AI TipWant to skip the docs? Use the MCP Server

Usage

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

<Chart.Root>
  <PieChart>
    <Pie>
      <Cell />
    </Pie>
  </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" />
  )}
/>

Bar Segment

Line Chart