RadialChart
RadialChartは、複数のデータを比較するための放射状チャートを描画するコンポーネントです。
interface Data {
browser: string
visits: number
fill?: CSSProps["fill"]
}
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
RadialChart.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 <RadialChart.Root data={data} series={series} />
使い方
import { RadialChart } from "@yamada-ui/react"
import { RadialChart } from "@/components/ui"
import { RadialChart } from "@workspaces/ui"
<RadialChart.Root>
<RadialChart.Radial>
<RadialChart.LabelList />
</RadialChart.Radial>
<RadialChart.Label />
<RadialChart.Grid />
<RadialChart.RadiusAxis />
<RadialChart.AngleAxis />
<RadialChart.Tooltip />
<RadialChart.Legend />
</RadialChart.Root>
コンポジション
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return (
<RadialChart.Root data={data}>
<RadialChart.Radial dataKey="visits" nameKey="browser">
<RadialChart.LabelList
dataKey="browser"
offset={4}
position="insideStart"
/>
</RadialChart.Radial>
<RadialChart.Tooltip />
<RadialChart.Legend />
</RadialChart.Root>
)
サイズを変更する
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return (
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size, index) => (
<RadialChart.Root key={index} data={data} series={series} size={size} />
)}
</For>
</VStack>
)
色を変更する
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(
() => RadialChart.mergeData(createPolarChartData(), "blue"),
[],
)
return <RadialChart.Root data={data} series={series} />
セクターの色を変更する
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <RadialChart.Root data={data} series={series} />
凡例を表示する
凡例を表示する場合は、withLegendをtrueに設定します。配置を変更する場合は、legendProps.placementに"start-start"や"end-end"などを設定します。デフォルトは、"start-end"です。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo<Data[]>(
() =>
createPolarChartData().map((item, index) => ({
...item,
fill: ["cyan", "green", "orange", "red", "blue", "gray"][index],
})),
[],
)
return <RadialChart.Root data={data} series={series} withLegend />
ラベルを表示する
ラベルを表示する場合は、seriesのlabelまたはradialProps.labelをtrueに設定します。デフォルトは、falseです。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(
() => RadialChart.mergeData(createPolarChartData(), "blue"),
[],
)
return (
<RadialChart.Root data={data} radialProps={{ label: true }} series={series} />
)
ラベルリストを表示する
ラベルリストを表示する場合は、seriesのlabelListまたはradialProps.labelListにtrueを設定します。デフォルトは、falseです。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return (
<RadialChart.Root
data={data}
radialProps={{ labelList: true }}
series={series}
/>
)
ラベルを中央に表示する
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(
() =>
RadialChart.mergeData([
{ browser: "chrome", visits: faker.number.int({ max: 5000, min: 1000 }) },
{ browser: "edge", visits: faker.number.int({ max: 5000, min: 1000 }) },
{ browser: "safari", visits: faker.number.int({ max: 5000, min: 1000 }) },
]),
[],
)
const total = useMemo(
() => data.reduce((acc, { visits }) => acc + visits, 0),
[data],
)
return (
<VStack>
<RadialChart.Root data={data} innerRadius="60%" series={series}>
<RadialChart.Label fontSize="5xl" fontWeight="bold" position="center">
Visitors
</RadialChart.Label>
</RadialChart.Root>
<RadialChart.Root data={data} innerRadius="60%" series={series}>
<RadialChart.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>
)
}}
/>
</RadialChart.Root>
</VStack>
)
開始角度を変更する
開始角度を変更する場合は、startAngleに数値を設定します。デフォルトは、90です。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return <RadialChart.Root data={data} series={series} startAngle={0} />
終了角度を変更する
終了角度を変更する場合は、endAngleに数値を設定します。デフォルトは、-270です。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return <RadialChart.Root data={data} endAngle={-180} series={series} />
内側の半径を変更する
内側の半径を変更する場合は、innerRadiusに数値または文字列を設定します。デフォルトは、"20%"です。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return <RadialChart.Root data={data} innerRadius="40%" series={series} />
外側の半径を変更する
外側の半径を変更する場合は、outerRadiusに数値または文字列を設定します。デフォルトは、"90%"です。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return <RadialChart.Root data={data} outerRadius="70%" series={series} />
角丸を変更する
角丸を変更する場合は、cornerRadiusに数値を設定します。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ cornerRadius: 9999, dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return <RadialChart.Root data={data} outerRadius="70%" series={series} />
間隔を変更する
間隔を変更する場合は、barCategoryGapに数値または文字列を設定します。デフォルトは、"10%"です。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return (
<RadialChart.Root
barCategoryGap="20%"
data={data}
outerRadius="70%"
series={series}
/>
)
積み上げる
積み上げる場合は、seriesのstackIdまたはradialProps.stackIdに文字列を設定します。
const series = useMemo(
() => [
{ color: "blue.500", dataKey: "desktop", nameKey: "browser" },
{ color: "blue.300", dataKey: "mobile", nameKey: "browser" },
],
[],
)
const data = useMemo(
() => [
{
browser: "chrome",
desktop: faker.number.int({ max: 3000, min: 2000 }),
mobile: faker.number.int({ max: 5000, min: 4000 }),
},
],
[],
)
const total = useMemo(
() => data.reduce((acc, { desktop, mobile }) => acc + desktop + mobile, 0),
[data],
)
return (
<RadialChart.Root
data={data}
endAngle={180}
innerRadius="70%"
series={series}
startAngle={0}
radialProps={{ stackId: "stack" }}
tooltipProps={{
formatter: (value, _, data) => [
Number(value).toLocaleString(),
toTitleCase(isString(data.dataKey) ? data.dataKey : ""),
],
}}
>
<RadialChart.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 - 40}>
{total.toLocaleString()}
</tspan>
</styled.tspan>
<styled.tspan asChild color="fg.muted" fontSize="xl">
<tspan x={viewBox.cx} y={viewBox.cy}>
Visitors
</tspan>
</styled.tspan>
</text>
)
}}
/>
</RadialChart.Root>
)
同期させる
同期させる場合は、syncIdに文字列を設定します。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return (
<VStack>
<RadialChart.Root data={data} series={series} syncId="chart" />
<RadialChart.Root data={data} series={series} syncId="chart" />
</VStack>
)
フォーマットする
フォーマットする場合は、formatterを使用します。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(
() => RadialChart.mergeData(createPolarChartData(), "blue"),
[],
)
return (
<RadialChart.Root
data={data}
radialProps={{
label: {
formatter: (value) => Number(value).toLocaleString(),
},
labelList: {
formatter: (value) => (isString(value) ? toTitleCase(value) : value),
},
}}
series={series}
tooltipProps={{
formatter: (value, name = "") => [
Number(value).toLocaleString(),
toTitleCase(name),
],
}}
/>
)
ツールチップを非表示にする
ツールチップを非表示にする場合は、withTooltipをfalseに設定します。デフォルトは、trueです。
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(() => RadialChart.mergeData(createPolarChartData()), [])
return <RadialChart.Root data={data} series={series} withTooltip={false} />