BarChart
BarChart is a component for drawing bar 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 { BarChart } from "@yamada-ui/charts"
Usage
BarChart internally uses Recharts.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return <BarChart data={data} series={series} dataKey="name" />
Change Size
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <VStack> <BarChart data={data} series={series} dataKey="name" size="sm" /> <BarChart data={data} series={series} dataKey="name" size="md" /> <BarChart data={data} series={series} dataKey="name" size="lg" /> <BarChart data={data} series={series} dataKey="name" size="full" /> </VStack> )
Stack
To stack, set type to "stacked".
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return <BarChart data={data} series={series} dataKey="name" type="stacked" />
Additionally, to stack individually, set a common string to stackId.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500", stackId: "stackId" }, { dataKey: "ぼうぎょ", color: "blue.500", stackId: "stackId" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return <BarChart data={data} series={series} dataKey="name" />
Convert to Percentage
To stack as a percentage, set type to "percent".
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return <BarChart data={data} series={series} dataKey="name" type="percent" />
Change Direction
To change the direction, set layoutType to "horizontal" or "vertical". The default is "horizontal".
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <BarChart data={data} series={series} dataKey="name" layoutType="vertical" /> )
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: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <VStack> <BarChart data={data} series={series} dataKey="name" withLegend /> <BarChart data={data} series={series} dataKey="name" withLegend legendProps={{ verticalAlign: "bottom", mb: "0", mt: "4" }} /> </VStack> )
Display Label
To display label, set xAxisLabel or yAxisLabel with a string.
Editable example
const data = useMemo( () => [ { name: "ゼニガメ", HP: 44, こうげき: 48, ぼうぎょ: 65, とくこう: 50, とくぼう: 64, すばやさ: 43, }, { name: "ヒトカゲ", HP: 39, こうげき: 52, ぼうぎょ: 43, とくこう: 60, とくぼう: 50, すばやさ: 65, }, { name: "フシギダネ", HP: 45, こうげき: 49, ぼうぎょ: 49, とくこう: 65, とくぼう: 65, すばやさ: 45, }, ], [], ) const series: AreaProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <BarChart data={data} series={series} dataKey="name" xAxisLabel="ポケモン" yAxisLabel="ステータス" /> )
Display Reference Line
To display a reference line, set referenceLineProps with props.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <BarChart data={data} series={series} dataKey="name" referenceLineProps={[{ y: 100, label: "Avg.", color: "red.500" }]} /> )
Hide Tooltip
To hide the tooltip, set withTooltip to false. The default is true.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <BarChart data={data} series={series} dataKey="name" withTooltip={false} /> )
Hide Axis
To hide the axis, set withYAxis or withXAxis to false. The default is true.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <VStack> <BarChart data={data} series={series} dataKey="name" withYAxis={false} /> <BarChart data={data} series={series} dataKey="name" withXAxis={false} /> </VStack> )
Change Grid Layout
To change the grid layout, set gridAxis to "x", "y", "xy", or "none".
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <VStack> <BarChart data={data} series={series} dataKey="name" gridAxis="x" /> <BarChart data={data} series={series} dataKey="name" gridAxis="y" /> <BarChart data={data} series={series} dataKey="name" gridAxis="xy" /> <BarChart data={data} series={series} dataKey="name" gridAxis="none" /> </VStack> )
Mark Ticks
To mark ticks, set tickLine to "x", "y", "xy", or "none".
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <VStack> <BarChart data={data} series={series} dataKey="name" tickLine="x" /> <BarChart data={data} series={series} dataKey="name" tickLine="y" /> <BarChart data={data} series={series} dataKey="name" tickLine="xy" /> <BarChart data={data} series={series} dataKey="name" tickLine="none" /> </VStack> )
Synchronize
To synchronize the behavior of the charts, set a common string to syncId of each chart.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <VStack> <BarChart data={data} series={series} dataKey="name" syncId="syncId" /> <BarChart data={data} series={series} dataKey="name" syncId="syncId" /> </VStack> )
Add Unit
To add a unit, set a string to unit.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return <BarChart data={data} series={series} dataKey="name" unit="P" />
Format
To format tooltip labels, use labelFormatter, and to format values, use valueFormatter.
To format axis labels, use xAxisTickFormatter or yAxisTickFormatter.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <VStack> <BarChart data={data} series={series} dataKey="name" labelFormatter={(value) => `ポケモン: ${value}`} valueFormatter={(value) => `${value}P`} /> <BarChart data={data} series={series} dataKey="name" xAxisTickFormatter={(value) => `ポケモン: ${value}`} yAxisTickFormatter={(value) => `${value}P`} /> </VStack> )
Adjust Opacity
To adjust opacity, set a number or an array of numbers to fillOpacity.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <BarChart data={data} series={series} dataKey="name" fillOpacity={[0.8, 0.7]} /> )
Adjust Dashed Line
To adjust the dashed line, set a string to strokeDasharray.
Editable example
const data = useMemo( () => [ { name: "エンテイ", HP: 115, こうげき: 115, ぼうぎょ: 85, とくこう: 90, とくぼう: 75, すばやさ: 100, }, { name: "ライコウ", HP: 90, こうげき: 85, ぼうぎょ: 75, とくこう: 115, とくぼう: 100, すばやさ: 115, }, { name: "スイクン", HP: 100, こうげき: 75, ぼうぎょ: 115, とくこう: 90, とくぼう: 115, すばやさ: 85, }, ], [], ) const series: BarProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500" }, { dataKey: "こうげき", color: "red.500" }, { dataKey: "ぼうぎょ", color: "blue.500" }, { dataKey: "とくこう", color: "purple.500" }, { dataKey: "とくぼう", color: "orange.500" }, { dataKey: "すばやさ", color: "cyan.500" }, ], [], ) return ( <BarChart data={data} series={series} dataKey="name" strokeDasharray="15 15" /> )
Edit this page on GitHub