KARAKURIDESIGN SYSTEM

BarChart

データの比較や推移を直感的に表現する棒グラフコンポーネントです。 縦棒・横棒のレイアウト切り替え、グループ・積み上げ表示、バーへのラベル表示など、豊富な表現オプションを備えています。

4
Types
5
Colors
3
Indicator
Recharts
Base

Playground

Preview
Multiple
Layout
Series
Style
Radius
Options
<Chart config={chartConfig} className="min-h-[200px]">
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <ChartXAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <ChartBar dataKey="desktop" fill="var(--color-desktop)" radius="base" />
    <ChartBar dataKey="mobile" fill="var(--color-mobile)" radius="base" />
  </BarChart>
</Chart>

JSX Composition

Chart.* は当ライブラリから、その他は Recharts からインポートしてください。

Grid<CartesianGrid />
Y-Axis<ChartYAxis />
Legend<ChartLegend />
Labels<LabelList />

Patterns

BarChartの主要な表示パターンです。用途に応じて使い分けてください。

Default

単一シリーズの基本的な棒グラフ

Multiple Bars

複数シリーズを並べて比較

Stacked

複数シリーズを積み上げて合計を視覚化

Horizontal

横方向の棒グラフ (layout="vertical")

Tooltip Styles

ChartTooltipContentのindicatorpropで、ツールチップのインジケーター形状を変更できます。

Dot (default)

デフォルトのドットインジケーター

January
Desktop186
Mobile80
indicator="dot"

Line

垂直線のインジケーター

January
Desktop186
Mobile80
indicator="line"

Dashed

破線のインジケーター

January
Desktop186
Mobile80
indicator="dashed"

API

Component Structure

Chart— Recharts
.BarProps.XAxis.YAxis.Tooltip.TooltipContentProps.Legend.LegendContent

Props

Chart

config—
ChartConfig

チャートの設定オブジェクト (ラベル・カラー定義)

children—
ReactElement

Rechartsチャートコンポーネント

idundefined
string

チャートのユニークID (CSS変数スコーピング用)

hoverFadefalse
boolean

ホバーしたバーグループをフルカラーで表示し、それ以外をフェードアウトするハイライト効果を有効にする

ChartBar

variant"solid"
"solid" | "outline"

バーのスタイル。"outline" は太い枠線と半透明の塗りで表示

radius"none"
"none" | "sm" | "base" | "md" | "lg"

角丸サイズ。デザイントークン (--radius-*) に対応した名前付きバリアント

layout"vertical"
"vertical" | "horizontal"

チャートの方向。"horizontal" では右側 (Y軸と反対側) に角丸を適用

stackPosition"top"
"top" | "bottom"

積み上げバーの位置。"bottom" では下側の角丸を適用

ChartTooltipContent

indicator"dot"
"dot" | "line" | "dashed"

インジケーターの形状

hideLabelfalse
boolean

ラベルを非表示にする

hideIndicatorfalse
boolean

インジケーターを非表示にする

colorundefined
string

インジケーターの色を直接指定。未指定時はペイロードの色を使用

labelClassNameundefined
string

ラベル要素に追加するCSSクラス

nameKeyundefined
string

データキーの名前マッピング

labelKeyundefined
string

ラベルキーのマッピング

labelFormatterundefined
(value, payload) => ReactNode

ラベルのカスタムフォーマッター

formatterundefined
(value, name, item, index, payload) => ReactNode

値のカスタムフォーマッター

ChartLegendContent

hideIconfalse
boolean

アイコンを非表示にする

nameKeyundefined
string

データキーの名前マッピング

verticalAlign"bottom"
"top" | "middle" | "bottom"

垂直位置 (Recharts Legendから自動注入)

align"center"
"left" | "center" | "right"

水平位置 (Recharts Legendから自動注入)

layout"horizontal"
"horizontal" | "vertical"

レイアウト方向 (Recharts Legendから自動注入)

ChartXAxis / ChartYAxis

tick{ style: { fontSize, fill } }
object

軸ラベルのスタイル。デフォルトでデザイントークン (--font-size-2xs, --color-text-subtle) を適用。カスタムオブジェクトで上書き可能

width (YAxis)"auto"
number | "auto"

Y軸の幅。"auto"でデータに応じて自動調整。数値で固定幅を指定可能

...props—
XAxisProps | YAxisProps

Recharts XAxis / YAxis の全プロパティをそのまま使用可能