PieChart
PieChart is a component for drawing pie 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 { PieChart } from "@yamada-ui/charts"
Usage
PieChart 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 <PieChart 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> <PieChart data={mewtwo} size="sm" /> <PieChart data={mewtwo} size="md" /> <PieChart 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> <PieChart data={mewtwo} withLegend /> <PieChart 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 <PieChart data={mewtwo} paddingAngle={15} />
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 <PieChart 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 <PieChart 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 <PieChart data={mewtwo} withLabels withLabelLines labelOffset={35} />
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 <PieChart 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 <PieChart 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 <PieChart 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> <PieChart data={mewtwo} valueFormatter={(value) => `${value}P`} /> <PieChart 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 <PieChart data={mewtwo} fillOpacity={[0.8, 0.7]} />
Edit this page on GitHub