PieChart
PieChart is a component for drawing pie charts to compare multiple sets of data.
interface Data {
browser: string
visits: number
fill?: CSSProps["fill"]
}
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
PieChart.mergeData([
{
browser: "chrome",
visits: faker.number.int({ max: 5000, min: 1000 }),
},
{
browser: "edge",
visits: faker.number.int({ max: 5000, min: 1000 }),
},
{
browser: "firefox",
visits: faker.number.int({ max: 5000, min: 1000 }),
},
{
browser: "opera",
visits: faker.number.int({ max: 5000, min: 1000 }),
},
{
browser: "safari",
visits: faker.number.int({ max: 5000, min: 1000 }),
},
{
browser: "other",
visits: faker.number.int({ max: 5000, min: 1000 }),
},
]),
[],
)
return <PieChart.Root data={data} series={series} />
Usage
import { PieChart } from "@yamada-ui/react"
import { PieChart } from "@/components/ui"
import { PieChart } from "@workspaces/ui"
<PieChart.Root>
<PieChart.Pie>
<PieChart.LabelList />
</PieChart.Pie>
<PieChart.Label />
<PieChart.Tooltip />
<PieChart.Legend />
</PieChart.Root>
Composition
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<PieChart.Root>
<PieChart.Pie data={data} dataKey="visits" nameKey="browser">
<PieChart.LabelList color="white" dataKey="browser" />
</PieChart.Pie>
<PieChart.Tooltip />
<PieChart.Legend />
</PieChart.Root>
)
Change Size
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData()),
[],
)
return (
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size, index) => (
<PieChart.Root key={index} data={data} series={series} size={size} />
)}
</For>
</VStack>
)
Change Color
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData(), "blue"),
[],
)
return <PieChart.Root data={data} series={series} />
Change Sector Colors
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <PieChart.Root data={data} series={series} />
Hide Sector Stroke
To hide sector stroke lines, set sectorStroke to "none".
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <PieChart.Root data={data} sectorStroke="none" series={series} />
Add Legend
To add the legend, set withLegend to true. The default is false.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <PieChart.Root data={data} series={series} withLegend />
To change the placement of the legend, set legendProps.placement to "start-start", "end-end", etc. The default is "start-end".
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <PieChart.Root data={data} series={series} withLegend />
Display Multiple Pies
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [
{
dataKey: "visits",
innerRadius: "80%",
nameKey: "browser",
},
{
dataKey: "downloads",
nameKey: "browser",
outerRadius: "70%",
},
],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData()),
[],
)
return <PieChart.Root data={data} series={series} />
Add Label
To display labels, set label or pieProps.label to true. The default is false.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <PieChart.Root data={data} pieProps={{ label: true }} series={series} />
Add Label Line
To display label lines, set labelLine of series or pieProps.labelLine to true. The default is false.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<PieChart.Root
data={data}
pieProps={{ label: true, labelLine: true }}
series={series}
/>
)
Change Label Offset
To change the label offset, set label.offset of series or pieProps.label.offset to a number. The default is 0.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<PieChart.Root
data={data}
pieProps={{ label: { offset: 12 } }}
series={series}
/>
)
Add Label List
To display values with label list, set labelList of series or pieProps.labelList to true. The default is false.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<PieChart.Root
data={data}
pieProps={{ labelList: { color: "white" } }}
series={series}
/>
)
Change Padding Angle
To change the padding angle, set paddingAngle of series or pieProps.paddingAngle to a number. The default is 0.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData()),
[],
)
return (
<PieChart.Root data={data} pieProps={{ paddingAngle: 15 }} series={series} />
)
Change Start Angle
To change the start angle, set startAngle of series or pieProps.startAngle to a number. The default is 90.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData()),
[],
)
return (
<PieChart.Root data={data} pieProps={{ startAngle: 0 }} series={series} />
)
Change End Angle
To change the end angle, set endAngle of series or pieProps.endAngle to a number. The default is -270.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData()),
[],
)
return (
<PieChart.Root data={data} pieProps={{ endAngle: -180 }} series={series} />
)
Change Inner Radius
To change the inner radius, set innerRadius of series or pieProps.innerRadius to a number or string. The default is "0%".
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData()),
[],
)
return (
<PieChart.Root
data={data}
pieProps={{ innerRadius: "70%" }}
series={series}
/>
)
Change Outer Radius
To change the outer radius, set outerRadius of series or pieProps.outerRadius to a number or string. The default is "100%".
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData()),
[],
)
return (
<PieChart.Root
data={data}
pieProps={{ outerRadius: "90%" }}
series={series}
/>
)
Sync
To sync charts, set syncId to a string.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData()),
[],
)
return (
<VStack>
<PieChart.Root data={data} series={series} syncId="chart" />
<PieChart.Root data={data} series={series} syncId="chart" />
</VStack>
)
Format
To format values and labels, use formatter.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<PieChart.Root
data={data}
series={series}
pieProps={{
label: {
formatter: (_, percent) => `${(percent * 100).toFixed(0)}%`,
},
labelLine: true,
labelList: {
color: "white",
formatter: (value) => (isString(value) ? toTitleCase(value) : value),
},
}}
tooltipProps={{
formatter: (value, name = "") => [
Number(value).toLocaleString(),
toTitleCase(name),
],
}}
/>
)
Hide Tooltip
To hide the tooltip, set withTooltip to false. The default is true.
const series = useMemo<PieChart.PieProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => PieChart.mergeData(createPolarChartData()),
[],
)
return <PieChart.Root data={data} series={series} withTooltip={false} />