DonutChart
DonutChart is a component for drawing donut 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 { DonutChart } from "@yamada-ui/charts"
Usage
DonutChart internally uses Recharts.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} />
Change Size
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <VStack> <DonutChart data={mewtwo} size="sm" /> <DonutChart data={mewtwo} size="md" /> <DonutChart data={mewtwo} size="lg" /> </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 mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <VStack> <DonutChart data={mewtwo} withLegend /> <DonutChart data={mewtwo} withLegend legendProps={{ verticalAlign: "bottom", mb: "0", mt: "4" }} /> </VStack> )
Adjust spacing
To adjust spacing, set paddingAngle to a number.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} paddingAngle={15} />
Adjust inner radius, outer radius
Set a percentage or number to innerRadius to adjust inner radius or outerRadius to adjust outer radius.
If a percentage is set, it is calculated as a percentage of the chart height.
If a number is set, it is calculated as px of the radius.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} innerRadius="70%" outerRadius="80%" />
Adjust start angle, end angle
Set an angle to startAngle to adjust start angle or endAngle to adjust end angle.
The direction is anticlockwise with 3 o'clock as 0°. To go clockwise, set a negative value.
The default values are 90 for startAngle and -270 for endAngle to go clockwise from 12 o'clock.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} startAngle={90} endAngle={225} />
Display Labels
To display the labels, set withLabels to true.
To display guide to labels, set withLabelLines to true.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} withLabels withLabelLines />
Adjust label position
To adjust label position, set labelOffset to a number.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} withLabels withLabelLines labelOffset={15} />
Make Proportional
To display the label as a percentage, set percent to true. The default is false.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} withLabels percent />
Switching the data displayed in the tooltip
To switch the data displayed in the tooltip, set tooltipDataSource to all or segment . The default is all.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} tooltipDataSource="segment" />
Hide Tooltip
To hide the tooltip, set withTooltip to false. The default is true.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} withTooltip={false} />
Format
To format tooltip values, use valueFormatter.
To format label values, use labelFormatter.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <VStack> <DonutChart data={mewtwo} valueFormatter={(value) => `${value}P`} /> <DonutChart data={mewtwo} withLabels labelFormatter={(value) => `${value}P`} /> </VStack> )
Adjust Opacity
To adjust opacity, set fillOpacity to a number or an array of numbers.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} fillOpacity={[0.8, 0.7]} />
Display text in the center
To display text in the center, set labelProps with props.
Editable example
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <DonutChart data={mewtwo} labelProps={{ value: "DonutChart", position: "center", fill: ["black", "white"], fontSize: "md", fontWeight: "bold", }} /> )
Edit this page on GitHub