Pie Chart

Usage

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

<Chart.Root>
  <PieChart>
    <Pie />
  </PieChart>
</Chart.Root>

Examples

Label inside

Render the LabelList from recharts inside the Pie to display the label inside the pie chart.

<Pie>
  <LabelList dataKey="name" position="inside" />
</Pie>

Label outside

Pass the label prop to the Pie component to display the label outside the pie chart.

<Pie labelLine={false} label={({ name, value }) => `${name}: ${value}`}>
  {/* ... */}
</Pie>

Remove Stroke

Set the stroke prop to none to remove the stroke from the pie chart.

Legend

Render the Chart.Legend component to display a legend for the pie chart.

Point Label

Here's an example of how to add point labels.

Start Angle

Set the startAngle and endAngle props to the desired start and end angles for the pie chart.

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