kaze風
BarChart
水平棒グラフコンポーネント。データの比較を直感的に表示。
プレビュー
使いどころ
使う場面
- 項目ごとの大きさを比べる（チャネル別の流入数、部署別の人数）。棒の長さで比べるので、ラベルが長くても読める
- 項目数は 3〜10 個。値の大きい順に並べて渡すと、ランキングとして読める
- 複数の BarChart を並べて比べるときは、max を共通の値にそろえる。そろえないと、棒の長さが比べられない
使わない場面
- 時間の推移。LineChart か ColumnChart を使う
- 全体に占める割合。DonutChart か CategoryBar を使う
- 上位 N 件のリンク付きランキング。BarList を使う。系列が複数あるときは ColumnChart を使う
使い方
<BarChart
aria-label="フレームワーク別人気度"
data={[
{ label: "React", value: 85 },
{ label: "Vue", value: 62 },
]}
formatValue={(v) => `${v}%`}
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
data必須 | BarChartItem[] | なし | { label, value, color? } の配列 |
max | number | なし | 最大値（省略時はデータの最大値） |
formatValue | (value: number) => string | なし | 値のフォーマット関数 |
aria-label必須 | string | なし | グラフの名前（必須）。読み上げで何のグラフかを伝える |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- aria-label は必須（型でも必須）。「チャネル別の流入数」のように、何を比べるグラフかを書く。無いと、読み上げで内容の見当がつかない
- role="figure" になり、各項目の「ラベル 値（最大値に対する %）」が読み上げ用に入る。棒は aria-hidden で、ラベルと数値は画面にも文字で出る
- 色は項目を区別するためではなく装飾。色の違いに意味を持たせるときは、ラベルでも伝える
- キーボードでは操作できない（フォーカスされない）。読み上げと画面の文字で同じ情報が得られる
文言
- ラベルは短い名詞（「自然検索」「広告」）。formatValue で単位を付ける（「1,240 件」）