DonutChart
DonutChartは、複数のデータを比較するためのドーナツチャートを描画するコンポーネントです。
interface Data {
browser: string
visits: number
fill?: CSSProps["fill"]
}
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
DonutChart.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 <DonutChart.Root data={data} series={series} />
使い方
import { DonutChart } from "@yamada-ui/react"
import { DonutChart } from "@/components/ui"
import { DonutChart } from "@workspaces/ui"
<DonutChart.Root>
<DonutChart.Donut>
<DonutChart.LabelList />
</DonutChart.Donut>
<DonutChart.Label />
<DonutChart.Tooltip />
<DonutChart.Legend />
</DonutChart.Root>
コンポジション
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<DonutChart.Root>
<DonutChart.Donut data={data} dataKey="visits" nameKey="browser">
<DonutChart.LabelList color="white" dataKey="browser" />
<Text as="span">Donut Chart</Text>
</DonutChart.Donut>
<DonutChart.Tooltip />
<DonutChart.Legend />
</DonutChart.Root>
)
サイズを変更する
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
return (
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size, index) => (
<DonutChart.Root key={index} data={data} series={series} size={size} />
)}
</For>
</VStack>
)
色を変更する
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData(), "blue"),
[],
)
return <DonutChart.Root data={data} series={series} />
セクターの色を変更する
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <DonutChart.Root data={data} series={series} />
セクターの境界線を非表示にする
セクターの境界線を非表示にする場合は、sectorStrokeに"none"を設定します。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <DonutChart.Root data={data} sectorStroke="none" series={series} />
凡例を表示する
凡例を表示する場合は、withLegendをtrueに設定します。デフォルトは、falseです。また、凡例の配置を変更する場合は、legendProps.placementに"start-start"や"end-end"などを設定します。デフォルトは、"start-end"です。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <DonutChart.Root data={data} series={series} withLegend />
複数の円を表示する
複数の円を表示する場合は、seriesに複数要素を設定します。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [
{
dataKey: "visits",
innerRadius: "80%",
nameKey: "browser",
},
{
dataKey: "downloads",
nameKey: "browser",
innerRadius: "50%",
outerRadius: "70%",
},
],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
return <DonutChart.Root data={data} series={series} />
ラベルを表示する
ラベルを表示する場合は、seriesのlabelまたはdonutProps.labelをtrueに設定します。デフォルトは、falseです。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<DonutChart.Root data={data} donutProps={{ label: true }} series={series} />
)
ラベル線を表示する
ラベル線を表示する場合は、seriesのlabelLineまたはdonutProps.labelLineをtrueに設定します。デフォルトは、falseです。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<DonutChart.Root
data={data}
donutProps={{ label: true, labelLine: true }}
series={series}
/>
)
ラベルのオフセットを変更する
ラベルのオフセットを変更する場合は、seriesのlabel.offsetまたはdonutProps.label.offsetに数値を設定します。デフォルトは、0です。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<DonutChart.Root
data={data}
donutProps={{ label: { offset: 12 } }}
series={series}
/>
)
ラベルリストを表示する
ラベルリストで表示する場合は、seriesのlabelListまたはdonutProps.labelListにtrueを設定します。デフォルトは、falseです。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<DonutChart.Root
data={data}
donutProps={{ labelList: { color: "white" } }}
series={series}
/>
)
ラベルを中央に表示する
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
const total = useMemo(
() => data.reduce((acc, { visits }) => acc + visits, 0),
[data],
)
return (
<VStack>
<DonutChart.Root data={data} series={series}>
<DonutChart.Label fontSize="5xl" fontWeight="bold" position="center">
Visitors
</DonutChart.Label>
</DonutChart.Root>
<DonutChart.Root data={data}>
<DonutChart.Donut dataKey="visits" nameKey="browser">
<DonutChart.Label
content={({ className, viewBox }) => {
if (!viewBox) return null
if (!("cx" in viewBox) || !("cy" in viewBox)) return null
return (
<text
className={className}
dominantBaseline="middle"
textAnchor="middle"
x={viewBox.cx}
y={viewBox.cy}
>
<styled.tspan asChild fontSize="6xl" fontWeight="bold">
<tspan x={viewBox.cx} y={viewBox.cy}>
{total.toLocaleString()}
</tspan>
</styled.tspan>
<styled.tspan asChild color="fg.muted" fontSize="xl">
<tspan x={viewBox.cx} y={viewBox.cy + 36}>
Visitors
</tspan>
</styled.tspan>
</text>
)
}}
/>
</DonutChart.Donut>
</DonutChart.Root>
</VStack>
)
余白を変更する
余白を変更する場合は、seriesのpaddingAngleまたはdonutProps.paddingAngleに数値を設定します。デフォルトは、0です。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
return (
<DonutChart.Root
data={data}
donutProps={{ paddingAngle: 15 }}
series={series}
/>
)
開始角度を変更する
開始角度を変更する場合は、seriesのstartAngleまたはdonutProps.startAngleに数値を設定します。デフォルトは、90です。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
return (
<DonutChart.Root data={data} donutProps={{ startAngle: 0 }} series={series} />
)
終了角度を変更する
終了角度を変更する場合は、seriesのendAngleまたはdonutProps.endAngleに数値を設定します。デフォルトは、-270です。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
return (
<DonutChart.Root
data={data}
donutProps={{ endAngle: -180 }}
series={series}
/>
)
内側の半径を変更する
内側の半径を変更する場合は、seriesのinnerRadiusまたはdonutProps.innerRadiusに数値または文字列を設定します。デフォルトは、"70%"です。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
return (
<DonutChart.Root
data={data}
donutProps={{ innerRadius: "50%" }}
series={series}
/>
)
外側の半径を変更する
外側の半径を変更する場合は、seriesのouterRadiusまたはdonutProps.outerRadiusに数値または文字列を設定します。デフォルトは、"100%"です。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
return (
<DonutChart.Root
data={data}
donutProps={{ outerRadius: "80%" }}
series={series}
/>
)
同期させる
同期させる場合は、syncIdに文字列を設定します。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
return (
<VStack>
<DonutChart.Root data={data} series={series} syncId="chart" />
<DonutChart.Root data={data} series={series} syncId="chart" />
</VStack>
)
フォーマットする
フォーマットする場合は、formatterを使用します。
const series = useMemo<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return (
<DonutChart.Root
data={data}
series={series}
donutProps={{
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<DonutChart.DonutProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() => DonutChart.mergeData(createPolarChartData()),
[],
)
return <DonutChart.Root data={data} series={series} withTooltip={false} />
アクセシビリティ
キーボード操作
| キー | 説明 | 状態 |
|---|---|---|
ArrowRight | 次のデータポイントに移動し、ツールチップを表示します。 | withTooltip={true} |
ArrowLeft | 前のデータポイントに移動し、ツールチップを表示します。 | withTooltip={true} |
Enter | アクティブなデータポイントのツールチップの表示を切り替えます。 | withTooltip={true} |
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
svg | role="application" | アプリケーションであることを示します。 |