kaze風
LineChart
時系列データの折れ線 / 面グラフ。複数系列、凡例での表示切替、ホバーとキーボードのツールチップに対応。SVG 手書きで依存ゼロ。
プレビュー
使いどころ
使う場面
- 時間の経過に沿った推移を見せる（月次の売上、日次のアクセス、残高）。折れ線の傾きで増減が読める
- 系列は 1〜4 本。それ以上は読み取れないので、絞るか、ChartLegend の切り替えで見せ分ける
- 価格や残高のように、値の範囲が狭い線は startAtZero={false} にして変化を見やすくする。棒グラフと違い、0 から始めなくても誤解されにくい
- 欠損値は null にすると、線が途切れる。0 で埋めると「ゼロだった」と誤解される
使わない場面
- 項目どうしの大きさの比較。BarChart か ColumnChart を使う
- 全体に占める割合。DonutChart か CategoryBar を使う
- データ点が少なく（3 点以下）、傾きを語れないとき。数字を Metric か Table で見せる
- 1 行の中で傾きだけ見せたいとき。Sparkline を使う
使い方
<LineChart
aria-label="月別の売上と利用者数"
index="month"
data={[
{ month: "4月", sales: 320, users: 210 },
{ month: "5月", sales: 340, users: 230 },
]}
series={[
{ key: "sales", label: "売上（万円）" },
{ key: "users", label: "利用者数（人）" },
]}
curve="monotone"
area
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
data必須 | LineChartDatum[] | なし | 1 行が 1 つの x 点。null / undefined は線を途切れさせる |
index必須 | string | なし | x 軸ラベルに使うキー（例: "month"） |
series必須 | LineChartSeries[] | なし | { key, label, color? } の配列。color 省略時は CHART_COLORS を順に使用 |
height | number | なし | 高さ（px）。幅は親要素に追従（既定: 240） |
area | boolean | なし | 線の下を単色の低不透明度で塗る（既定: false） |
curve | "linear" | "monotone" | なし | monotone は行き過ぎない単調な 3 次補間（既定: linear） |
showGrid | boolean | なし | 横の目盛り線を表示する |
showXAxis | boolean | なし | X 軸のラベルを表示する |
showYAxis | boolean | なし | Y 軸のラベルを表示する |
showLegend | boolean | なし | クリックで系列を切り替えられる凡例を表示する |
showDots | boolean | なし | 常に点を表示。ホバー中の点は常に表示（既定: false） |
yAxisWidth | number | なし | y 軸ラベルの幅（既定: 48） |
startAtZero | boolean | true | y 軸に 0 を含める。false でデータの範囲に合わせる（株価・残高などの推移向け） |
formatValue | (value: number) => string | なし | y 軸とツールチップの値フォーマット |
aria-label必須 | string | なし | グラフの説明（必須） |
showGrid / showXAxis / showYAxis / showLegend | boolean | なし | 各要素の表示切替（既定: true） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | グラフにフォーカスを移す |
| → | 次のデータ点に移動し、値のツールチップを出す（最初はいちばん左） |
| ← | 前のデータ点に移動する（最初はいちばん右） |
| Home / End | 最初・最後のデータ点に移動する |
| Esc | ツールチップを閉じる |
アクセシビリティ
- aria-label は必須。「過去 12 か月の売上推移」のように書く。グラフは role="img" で、ラベル以外のデータは読み上げられない
- データ点に移動すると、ツールチップ（role="status"）の内容が読み上げられる。全データを一度に知らせる仕組みはないので、傾向や最大値、最新値は近くの文章か表でも書く
- 系列の違いは色だけでなく、ChartLegend のラベルで伝える。showLegend は既定で true なので、外さない
- 凡例のボタンで系列を隠せる。aria-pressed で状態が伝わる
文言
- formatValue で単位を付ける（「1,240 万円」）。軸と tooltip の両方に反映される
- x 軸のラベルは短くそろえる（「10月」「1/5」）