RadialChart
RadialChart is a component for drawing radial charts to compare multiple sets of data.
Import
pnpm add @yamada-ui/charts
@yamada-ui/charts is not included in @yamada-ui/react, so it needs to be installed separately.
import { RadialChart } from "@yamada-ui/charts"
Usage
RadialChart internally uses Recharts.
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return <RadialChart data={data} />
Change Size
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return ( <VStack> <RadialChart data={data} size="sm" /> <RadialChart data={data} size="md" /> <RadialChart data={data} size="lg" /> <RadialChart data={data} size="full" /> </VStack> )
Display Legend
To display the legend, set withLegend to true. To change the position of the legend, set legendProps.verticalAlign to "bottom" or similar.
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return ( <VStack> <RadialChart data={data} withLegend /> <RadialChart data={data} withLegend legendProps={{ verticalAlign: "bottom", mb: "0", mt: "4" }} /> </VStack> )
Adjust Spacing
To adjust the spacing, set barCategoryGap in radialBarProps.
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return ( <RadialChart data={data} interRadius={30} chartProps={{ barCategoryGap: "30%", }} /> )
Adjust Inner and Outer Radius
To adjust the inner radius, set innerRadius, and for the outer radius, set outerRadius with either a percentage or a numerical value.
If you set a percentage, it will be calculated as a proportion of the chart's height.
If you set a numerical value, it will be calculated as the radius in pixels.
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return ( <VStack> <RadialChart data={data} innerRadius="30%" /> <RadialChart data={data} outerRadius="70%" /> </VStack> )
Adjust Start and End Angles
To adjust the start angle, set startAngle, and for the end angle, set endAngle.
The direction of 3 o'clock is considered 0 degrees, and it progresses counterclockwise. If you want to go clockwise, set a negative value.
The default values are set to go clockwise from 9 o'clock, so startAngle is set to 90 and endAngle to -180.
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return <RadialChart data={data} startAngle={180} endAngle={0} />
Display Labels
To display labels, set the locations and values of the labels you want to show in labelListProps as an array.
Editable example
const data: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return ( <RadialChart data={data} innerRadius={50} endAngle={-225} labelListProps={[ { position: "insideStart", dataKey: "name", }, { position: "insideEnd", dataKey: "value", }, ]} /> )
Switch Data Displayed in Tooltip
To switch the data displayed in the tooltip, set tooltipDataSource to either all or segment. The default is all.
Editable example
const data: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return <RadialChart data={data} tooltipDataSource="segment" />
Hide Tooltip
To hide the tooltip, set withTooltip to false. The default is true.
Editable example
const data: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return <RadialChart data={data} withTooltip={false} />
Format
To format the values in the tooltip, use valueFormatter.
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return <RadialChart data={data} valueFormatter={(value) => `${value}P`} />
Adjust Opacity
To adjust the opacity, set fillOpacity with either a numerical value or an array of numbers.
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return <RadialChart data={data} fillOpacity={[0.8, 0.7]} />
Display Grid
To display the grid, set withPolarGrid to true.
To change the shape of the grid, set polarGridProps.gridType to either "polygon" or "circle". The default is "polygon".
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return ( <VStack> <RadialChart data={data} withPolarGrid endAngle={-270} /> <RadialChart data={data} withPolarGrid endAngle={-270} polarGridProps={{ gridType: "circle" }} /> </VStack> )
Display Background
To display the background, set radialBarProps.background with fill.
Editable example
const data = useMemo( () => [ { name: "HP", value: 106, color: "green.500" }, { name: "こうげき", value: 90, color: "red.500" }, { name: "ぼうぎょ", value: 130, color: "blue.500" }, { name: "とくこう", value: 90, color: "purple.500" }, { name: "とくぼう", value: 154, color: "orange.500" }, { name: "すばやさ", value: 110, color: "cyan.500" }, ], [], ) return ( <RadialChart data={data} radialBarProps={{ background: { fill: ["blackAlpha.200", "whiteAlpha.100"] }, }} /> )
Edit this page on GitHub