RadialChart
RadialChart is a component for drawing radial charts to compare multiple sets of data.
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} />
Usage
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>
Composition
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>
)
Change Size
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>
)
Change Color
const series = useMemo<RadialChart.RadialProps<Data>[]>(
() => [{ dataKey: "visits", nameKey: "browser" }],
[],
)
const data = useMemo(
() => RadialChart.mergeData(createPolarChartData(), "blue"),
[],
)
return <RadialChart.Root data={data} series={series} />
Change Sector Colors
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} />
Add Legend
To add the legend, set withLegend to true. To change placement, set legendProps.placement to "start-start", "end-end", etc. The default is "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 />
Add Label
To display labels, set label or radialProps.label to true. The default is 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} />
)
Add Label List
To display label list, set labelList or radialProps.labelList to true. The default is 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}
/>
)
Add Center Label
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>
)
Change Start Angle
To change the start angle, set startAngle to a number. The default is 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} />
Change End Angle
To change the end angle, set endAngle to a number. The default is -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} />
Change Inner Radius
To change the inner radius, set innerRadius to a number or string. The default is "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} />
Change Outer Radius
To change the outer radius, set outerRadius to a number or string. The default is "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} />
Change Corner Radius
To round sector corners, set cornerRadius to a number.
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} />
Change Gap
To change the gap between bars, set barCategoryGap to a number or string. The default is "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}
/>
)
Stacked
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}
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>
)
Sync
To sync charts, set syncId to a string.
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>
)
Format
To format the chart, use 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),
],
}}
/>
)
Hide Tooltip
To hide the tooltip, set withTooltip to false. The default is 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} />