PieChart
PieChartは、複数のデータを比較するためのパイチャートを描画するコンポーネントです。
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} />
使い方
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>
コンポジション
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>
)
サイズを変更する
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>
)
色を変更する
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} />
セクターの色を変更する
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} />
セクターの境界線を非表示にする
セクターの境界線を非表示にする場合は、sectorStrokeに"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} />
凡例を表示する
凡例を表示する場合は、withLegendをtrueに設定します。デフォルトは、falseです。また、凡例の配置を変更する場合は、legendProps.placementに"start-start"や"end-end"などを設定します。デフォルトは、"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 />
複数の円を表示する
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} />
ラベルを表示する
ラベルを表示する場合は、seriesのlabelまたはpieProps.labelをtrueに設定します。デフォルトは、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} />
ラベル線を表示する
ラベル線を表示する場合は、seriesのlabelLineまたはpieProps.labelLineをtrueに設定します。デフォルトは、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}
/>
)
ラベルのオフセットを変更する
ラベルのオフセットを変更する場合は、seriesのlabel.offsetまたはpieProps.label.offsetに数値を設定します。デフォルトは、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}
/>
)
ラベルリストを表示する
値をラベルリストで表示する場合は、seriesのlabelListまたはpieProps.labelListにtrueを設定します。デフォルトは、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}
/>
)
余白を変更する
余白を変更する場合は、seriesのpaddingAngleまたはpieProps.paddingAngleに数値を設定します。デフォルトは、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} />
)
開始角度を変更する
開始角度を変更する場合は、seriesのstartAngleまたはpieProps.startAngleに数値を設定します。デフォルトは、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} />
)
終了角度を変更する
終了角度を変更する場合は、seriesのendAngleまたはpieProps.endAngleに数値を設定します。デフォルトは、-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} />
)
内側の半径を変更する
内側の半径を変更する場合は、seriesのinnerRadiusまたはpieProps.innerRadiusに数値または文字列を設定します。デフォルトは、"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}
/>
)
外側の半径を変更する
外側の半径を変更する場合は、seriesのouterRadiusまたはpieProps.outerRadiusに数値または文字列を設定します。デフォルトは、"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}
/>
)
同期させる
同期させる場合は、syncIdに文字列を設定します。
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>
)
フォーマットする
フォーマットする場合は、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),
],
}}
/>
)
ツールチップを非表示にする
ツールチップを非表示にする場合は、withTooltipをfalseに設定します。デフォルトは、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} />