Line Chart

値を線で結ぶグラフ（面グラフ）。期間を切り替えると線が形を変えながら動き、触れた点には縦の線と吹き出しが滑って付いてくる。

インポート

import { LineChart } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { LineChart } from '@caroainc/ui-components/line-chart'

推移・累計など、右肩上がりかどうかを見せたいときに使います。

基本的な使い方

areaで線の下を薄く塗ります。期間を切り替えると、同じ日の点はその点のまま新しい位置へ動き、増えた日は左端から伸び出します。最初の表示では0の高さから立ち上がります。

<LineChart
  aria-label="累計売上"
  className="h-56"
  data={cumulative}
  getKey={(day) => day.date}
  getValue={(day) => day.total}
  area
  formatTick={(value) => `${value / 10000}万`}
  formatValue={(value) => `${value.toLocaleString()}円`}
  renderLabel={(day, index) => (index % 5 === 0 ? day.date : null)}
/>

2本以上の線

seriesで線を増やします。凡例を出し、吹き出しに系列ごとの値を出します。触れた点には系列ごとの印が付きます。

チケット
物販

<LineChart
  data={days}
  getKey={(day) => day.date}
  series={[
    { key: 'tickets', label: 'チケット', getValue: (day) => day.amount },
    { key: 'merch', label: '物販', getValue: (day) => day.merch, color: 'blue' },
  ]}
/>

動きと操作

線の形はcurveで選びます。smooth（既定）は値の山と谷を越えて膨らまない滑らかな曲線、linearは直線で結びます
点は横幅を等分した真ん中に置きます（Bar Chartと同じ位置。端のラベルがはみ出さない）
縦軸・キーボード操作・動きを減らす設定の扱いはBar Chartと同じです

Props

Prop	Type	Default	Description
`data`	`T[]`	`-`	左から順に結ぶ値（必須）
`getKey`	`(datum: T) => string`	`-`	点を見分ける値（必須）
`getValue`	`(datum: T) => number`	`-`	点の高さにする値（1本のとき）
`series`	`{ key: string; label: ReactNode; getValue: (datum: T) => number; color?: ChartColor }[]`	`-`	2本以上の線。指定するとgetValue・colorは使わない
`color`	`ChartColor`	`'base'`	1本のときの線の色
`area`	`boolean`	`false`	線の下を薄く塗る
`curve`	`'smooth' \| 'linear'`	`'smooth'`	点を結ぶ線の形
`showLegend`	`boolean`	`2本以上のときtrue`	凡例を出す
`renderLabel`	`(datum: T, index: number) => ReactNode`	`-`	点の下のラベル。nullで間引く
`renderTooltip`	`(datum: T) => ReactNode`	`-`	点に触れたときの吹き出し
`formatValue`	`(value: number) => string`	`3桁区切り`	吹き出しの値の書き方
`formatTick`	`(value: number) => string`	`formatValue`	縦軸の目盛りの書き方（「5万」など短く）
`tickCount`	`number`	`4`	縦軸の目盛りの数の目安
`aria-label`	`string`	`-`	グラフの名前（読み上げ用）