7onicDESIGN 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} />
    <Chart.XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <Chart.Tooltip content={<Chart.TooltipContent />} />
    <Chart.Legend content={<Chart.LegendContent />} />
    <Chart.Bar dataKey="desktop" fill="var(--color-desktop)" radius="base" />
    <Chart.Bar dataKey="mobile" fill="var(--color-mobile)" radius="base" />
  </BarChart>
</Chart>

JSX Composition

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

Grid<CartesianGrid />
Y-Axis<Chart.YAxis />
Legend<Chart.Legend />
Labels<LabelList />

Patterns

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

Default

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

Multiple Bars

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

Stacked

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

Horizontal

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

Tooltip Styles

Chart.TooltipContentの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

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

Chart.Bar

variant"solid"
"solid" | "outline"

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

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

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

layout"vertical"
"vertical" | "horizontal"

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

stackPosition"top"
"top" | "bottom"

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

Chart.TooltipContent

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

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

Chart.LegendContent

hideIconfalse
boolean

アイコンを非表示にする

nameKeyundefined
string

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

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

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

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

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

layout"horizontal"
"horizontal" | "vertical"

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

Chart.XAxis / Chart.YAxis

tick{ style: { fontSize, fill } }
object

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

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

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

...props—
XAxisProps | YAxisProps

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

Anatomy

1
2
4
3002001000
7
5
3
JanFebMarAprMayJun
6
March
Desktop237
8
Desktop
Mobile
1
Root
Chartラッパー
2
Chart Area
プロットエリア
3
X-Axis
水平軸
4
Y-Axis
垂直軸
5
Bar
データバー
6
Tooltip
ホバー情報
7
Grid
グリッド線
8
Legend
シリーズ凡例

Best Practices

✓

推奨

  • ✓ChartConfigでラベルとカラーを一元管理する
  • ✓accessibilityLayerを必ず有効にする
  • ✓min-hまたはaspect-videoでコンテナサイズを指定する
  • ✓デザイントークンのカラーを使用する
✕

避けるべき

  • ✗ハードコードされたカラー値を直接使用しない
  • ✗コンテナサイズなしでチャートを配置しない
  • ✗5シリーズ以上を1つのチャートに詰め込まない
  • ✗グリッドなしでデータの比較を強制しない

Accessibility

キーボード操作

Tabチャートエリアにフォーカス
Arrow Keysデータポイント間の移動

ARIA / WCAG

  • accessibilityLayer キーボード+SR対応
  • Tooltipでデータ値をテキストで提供
  • Legendでシリーズを識別可能
  • カラートークンでダークモード自動対応