Pie Chart
Used to display data as segments of a circular chart
AI TipWant to skip the docs? Use the MCP Server
"use client" import { Chart, useChart } from "@chakra-ui/charts" import { Cell, Pie, PieChart } from "recharts" const Demo = () => { const chart = useChart({ data: [ { name: "windows", value: 400, color: "blue.solid" }, { name: "mac", value: 300, color: "orange.solid" }, { name: "linux", value: 300, color: "pink.solid" }, { name: "other", value: 200, color: "green.solid" }, ], }) return ( <Chart.Root boxSize="200px" mx="auto" chart={chart}> <PieChart> <Pie isAnimationActive={false} data={chart.data} dataKey={chart.key("value")} > {chart.data.map((item) => ( <Cell key={item.name} fill={chart.color(item.color)} /> ))} </Pie> </PieChart> </Chart.Root> ) } 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>"use client" import { Chart, useChart } from "@chakra-ui/charts" import { Cell, LabelList, Pie, PieChart, Tooltip } from "recharts" const Demo = () => { const chart = useChart({ data: [ { name: "windows", value: 400, color: "blue.solid" }, { name: "mac", value: 300, color: "orange.solid" }, { name: "linux", value: 300, color: "pink.solid" }, { name: "other", value: 200, color: "green.solid" }, ], }) return ( <Chart.Root boxSize="320px" mx="auto" chart={chart}> <PieChart> <Tooltip cursor={false} animationDuration={100} content={<Chart.Tooltip hideLabel />} /> <Pie isAnimationActive={false} data={chart.data} dataKey={chart.key("value")} > <LabelList position="inside" fill="white" stroke="none" /> {chart.data.map((item) => ( <Cell key={item.name} fill={chart.color(item.color)} /> ))} </Pie> </PieChart> </Chart.Root> ) } 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>"use client" import { Chart, useChart } from "@chakra-ui/charts" import { Cell, Pie, PieChart } from "recharts" const Demo = () => { const chart = useChart({ data: [ { name: "windows", value: 400, color: "blue.solid" }, { name: "mac", value: 300, color: "orange.solid" }, { name: "linux", value: 300, color: "pink.solid" }, { name: "other", value: 200, color: "green.solid" }, ], }) return ( <Chart.Root boxSize="200px" mx="auto" chart={chart}> <PieChart> <Pie isAnimationActive={false} data={chart.data} dataKey={chart.key("value")} outerRadius={100} innerRadius={0} labelLine={false} label={({ name, index }) => { const { value } = chart.data[index ?? -1] const percent = value / chart.getTotal("value") return `${name}: ${(percent * 100).toFixed(1)}%` }} > {chart.data.map((item) => { return <Cell key={item.name} fill={chart.color(item.color)} /> })} </Pie> </PieChart> </Chart.Root> ) } Remove Stroke
Set the stroke prop to none to remove the stroke from the pie chart.
"use client" import { Chart, useChart } from "@chakra-ui/charts" import { Cell, Pie, PieChart, Tooltip } from "recharts" const Demo = () => { const chart = useChart({ data: [ { name: "windows", value: 400, color: "blue.solid" }, { name: "mac", value: 300, color: "orange.solid" }, { name: "linux", value: 300, color: "pink.solid" }, { name: "other", value: 200, color: "green.solid" }, ], }) return ( <Chart.Root boxSize="200px" mx="auto" chart={chart}> <PieChart> <Tooltip cursor={false} animationDuration={100} content={<Chart.Tooltip hideLabel />} /> <Pie isAnimationActive={false} data={chart.data} dataKey={chart.key("value")} nameKey="name" stroke="none" > {chart.data.map((item) => ( <Cell key={item.name} fill={chart.color(item.color)} /> ))} </Pie> </PieChart> </Chart.Root> ) } Legend
Render the Chart.Legend component to display a legend for the pie chart.
"use client" import { Chart, useChart } from "@chakra-ui/charts" import { Cell, Legend, Pie, PieChart } from "recharts" const Demo = () => { const chart = useChart({ data: [ { name: "windows", value: 400, color: "teal.solid" }, { name: "mac", value: 300, color: "orange.solid" }, { name: "linux", value: 300, color: "blue.solid" }, ], }) return ( <Chart.Root boxSize="200px" mx="auto" chart={chart}> <PieChart> <Legend content={<Chart.Legend />} /> <Pie isAnimationActive={false} data={chart.data} dataKey={chart.key("value")} nameKey="name" > {chart.data.map((item) => ( <Cell key={item.name} fill={chart.color(item.color)} /> ))} </Pie> </PieChart> </Chart.Root> ) } Point Label
Here's an example of how to add point labels.
"use client" import { Chart, useChart } from "@chakra-ui/charts" import { Cell, Pie, PieChart, Tooltip } from "recharts" const Demo = () => { const chart = useChart({ data: [ { name: "windows", value: 400, color: "blue.solid" }, { name: "mac", value: 300, color: "orange.solid" }, { name: "linux", value: 300, color: "pink.solid" }, { name: "other", value: 200, color: "green.solid" }, ], }) return ( <Chart.Root boxSize="320px" mx="auto" chart={chart}> <PieChart> <Tooltip cursor={false} animationDuration={100} content={<Chart.Tooltip hideLabel />} /> <Pie isAnimationActive={false} data={chart.data} dataKey={chart.key("value")} labelLine={{ stroke: chart.color("border.emphasized") }} label={{ fill: chart.color("fg.muted"), style: { fontWeight: "600" }, }} > {chart.data.map((item) => ( <Cell key={item.name} fill={chart.color(item.color)} /> ))} </Pie> </PieChart> </Chart.Root> ) } 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>"use client" import { Chart, useChart } from "@chakra-ui/charts" import { Cell, Pie, PieChart, Tooltip } from "recharts" const Demo = () => { const chart = useChart({ data: [ { name: "typescript", value: 400, color: "blue.solid" }, { name: "javascript", value: 120, color: "orange.solid" }, { name: "python", value: 300, color: "pink.solid" }, { name: "rust", value: 278, color: "purple.solid" }, ], }) return ( <Chart.Root boxSize="320px" mx="auto" chart={chart}> <PieChart> <Tooltip cursor={false} animationDuration={100} content={<Chart.Tooltip hideLabel />} /> <Pie isAnimationActive={false} data={chart.data} dataKey={chart.key("value")} nameKey="name" startAngle={180} endAngle={0} > {chart.data.map((item) => ( <Cell key={item.name} fill={chart.color(item.color)} /> ))} </Pie> </PieChart> </Chart.Root> ) }