kaze風
ColumnChart
縦棒グラフコンポーネント。複数系列をグループ表示・積み上げ表示で比較できる。カテゴリや期間の比較向け。
プレビュー
使いどころ
使う場面
- 期間ごとの量を比べる（月別の売上、週別の新規登録）。1 つ 1 つの値の大きさを読ませたい推移に向く
- 系列が複数あるとき。grouped は系列どうしの比較、stacked は合計と内訳を同時に見せる
- 系列は 1〜4 本、期間は 4〜24 個程度。ラベルが長いときは、BarChart の横棒を使う
使わない場面
- なめらかな傾きを見せたい長い時系列（30 点以上）。LineChart を使う
- 全体に占める割合を 1 時点で見せること。DonutChart か CategoryBar を使う
- stacked で系列が多く、内側の系列の値を比べさせたいとき。上と下以外は基準線が動くので比べにくい。grouped を使う
使い方
<ColumnChart
aria-label="チャネル別の月次売上"
index="month"
layout="stacked"
data={[
{ month: "4月", web: 420, app: 310 },
{ month: "5月", web: 380, app: 340 },
]}
series={[
{ key: "web", label: "Web" },
{ key: "app", label: "アプリ" },
]}
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
data必須 | Record<string, string | number>[] | なし | カテゴリ名と系列ごとの値を持つ行の配列 |
index必須 | string | なし | カテゴリ名（x 軸）を持つフィールド名 |
series必須 | ColumnChartSeries[] | なし | { key, label, color? } の配列。color 省略時は共通パレット |
layout | "grouped" | "stacked" | "grouped" | 横に並べる / 積み上げる。積み上げは正負を別々に積む |
height | number | 240 | グラフの高さ（px）。幅は親要素に追従 |
showGrid | boolean | true | グリッド線の表示 |
showXAxis | boolean | true | x 軸ラベルの表示（多いときは間引く） |
showYAxis | boolean | true | y 軸ラベルの表示 |
showLegend | boolean | true | 凡例の表示。クリックで系列の表示 / 非表示 |
yAxisWidth | number | 48 | y 軸ラベルの幅（px） |
formatValue | (value: number) => string | なし | 軸とツールチップの値フォーマット |
barRadius | number | 2 | 棒の先端の角丸（px） |
aria-label必須 | string | なし | グラフの説明（アクセシビリティ用、必須） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | グラフにフォーカスを移す |
| → | 次のカテゴリに移動し、値のツールチップを出す（最初は先頭） |
| ← | 前のカテゴリに移動する（最初は末尾） |
| Home / End | 最初・最後のカテゴリに移動する |
| Esc | ツールチップを閉じる |
アクセシビリティ
- aria-label は必須。グラフは role="img" で、ラベルだけが読み上げられる。「月別の新規登録数（2026 年）」のように書く
- カテゴリに移動すると、ツールチップ（role="status"）にカテゴリ名と各系列の値が出て、読み上げられる。フォーカスが外れると閉じる
- 系列の違いは色だけに頼らず、ChartLegend のラベルで伝える。stacked では tooltip に合計も出る
- 傾向や最大・最小の月は、近くの文章か Table でも書く
文言
- formatValue で単位を付ける。軸と tooltip の両方に反映される
- カテゴリは短い名詞（「10月」「東京」）。長いと自動で間引かれる