BarChart
BarChartは、複数のデータを比較するための棒グラフを描画するコンポーネントです。
インポート
pnpm add @yamada-ui/charts
@yamada-ui/chartsは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。
import { BarChart } from "@yamada-ui/charts"
使い方
BarChartは、内部的にRechartsを使用しています。
編集可能な例
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" />
サイズを変更する
編集可能な例
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> )
積み上げる
積み上げる場合は、typeに"stacked"を設定します。
編集可能な例
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" />
また、個別に積み上げる場合は、stackIdに共通の文字列を設定します。
編集可能な例
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" />
割合にする
スタックする場合は、typeに"percent"を設定します。
編集可能な例
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" />
方向を変更する
方向を変更する場合は、layoutTypeに"horizontal"または"vertical"を設定します。デフォルトは、"horizontal"です。
編集可能な例
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" /> )
凡例を表示する
凡例を表示する場合は、withLegendをtrueに設定します。また、凡例の位置を変更する場合は、legendProps.verticalAlignに"bottom"などを設定します。
編集可能な例
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> )
ラベルを表示する
ラベルを表示する場合は、xAxisLabelまたはyAxisLabelに文字列を設定します。
編集可能な例
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="ステータス" /> )
基準線を表示する
基準線を表示する場合は、referenceLinePropsにpropsを設定します。
編集可能な例
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" }]} /> )
ツールチップを非表示にする
ツールチップを非表示にする場合は、withTooltipをfalseに設定します。デフォルトは、trueです。
編集可能な例
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} /> )
軸を非表示にする
軸を非表示にする場合は、withYAxisまたはwithXAxisをfalseに設定します。デフォルトは、trueです。
編集可能な例
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> )
グリッドのレイアウトを変更する
グリッドのレイアウトを変更する場合は、gridAxisに"x", "y", "xy"または"none"を設定します。
編集可能な例
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> )
しるしをつける
しるしをつける場合は、tickLineに"x", "y", "xy"または"none"を設定します。
編集可能な例
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> )
同期させる
グラフの動作を同期させる場合は、互いのグラフのsyncIdに共通の文字列を設定します。
編集可能な例
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> )
単位をつける
単位をつける場合は、unitに文字列を設定します。
編集可能な例
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" />
フォーマットする
ツールチップのラベルをフォーマットする場合はlabelFormatterを、値をフォーマットする場合は、valueFormatterを使います。
軸のラベルをフォーマットする場合は、xAxisTickFormatterまたはyAxisTickFormatterを使います。
編集可能な例
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> )
透明度を調整する
透明度を調整する場合は、fillOpacityに数値または数値の配列を設定します。
編集可能な例
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]} /> )
破線を調整する
破線を調整する場合は、strokeDasharrayに文字列を設定します。
編集可能な例
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" /> )
GitHubでこのページを編集する