Bar Chart
値を棒の高さで並べるグラフ。期間を切り替えると棒がそのまま伸び縮みして動き、触れた棒には吹き出しが滑って付いてくる。
インポート
import { BarChart } from '@caroainc/ui-components/client'個別サブパス（バンドルサイズを抑えたい場合）:
import { BarChart } from '@caroainc/ui-components/bar-chart'日ごとの売上・件数など、項目ごとの値を棒で並べるときに使います。
基本的な使い方
期間を切り替えると、同じ日の棒はその棒のまま新しい幅と高さへ動きます。増えた日は左端から押し出され、減った日は左端へ畳まれます。縦軸の目盛りも新しい高さへ滑ります。棒にカーソルを当てる（スマートフォンでは指でなぞる）と、背景と吹き出しが隣の棒へ滑って移ります。
Loading...
const data = range === '7' ? days.slice(-7) : days
<BarChart
aria-label="日ごとのチケット売上"
className="h-56"
data={data}
getKey={(day) => day.date}
getValue={(day) => day.amount}
formatTick={(value) => (value === 0 ? '0' : `${value / 10000}万`)}
renderLabel={(day, index) => (range === '7' || index % 5 === 0 ? day.date : null)}
renderTooltip={(day) => `${day.date} ${day.amount.toLocaleString()}円`}
/>色
colorで棒の色を、caroa-uiの色トークンから選びます（base・primary・gray・blue・turquoise・green・yellow・orange・red・purple）。既定はbase（黒、暗い画面では白）です。getColorで棒ごとに色を変えられます（今日だけ・目標を超えた日だけなど）。色を変えると、棒は新しい色へ滑らかに移ります。
Loading...
<BarChart
color="blue"
getColor={(day, index) => (index === data.length - 1 ? 'orange' : undefined)}
...
/>系列（積み上げ・並べる）
seriesで1日に2つ以上の値を見せます。既定は横に並べ、stackedで1本に積みます。2系列以上では凡例を出し、吹き出しに系列ごとの値を出します。系列の色を省くと、黒・青・橙…の順に割り当てます。
Loading...
<BarChart
data={days}
getKey={(day) => day.date}
series={[
{ key: 'tickets', label: 'チケット', getValue: (day) => day.amount },
{ key: 'merch', label: '物販', getValue: (day) => day.merch, color: 'orange' },
]}
stacked
/>動きと操作
- 最初の表示では、左の棒から順に下から伸びます
getKeyが同じ棒は、データを切り替えても同じ棒として動きます。日付など、切り替えの前後で変わらない値を返します- 縦軸は0から始まり、区切りのよい値（1・2・2.5・5の10の累乗倍）で
tickCount個前後に刻みます。負の値は0として描きます - キーボードはグラフにフォーカスして左右の矢印キーで棒を選び、Home・Endで端へ、Escapeで吹き出しを閉じます。選んだ棒の吹き出しの内容は読み上げます
- 動きを減らす設定（
prefers-reduced-motion）の利用者には、動かさずに切り替えます - 既定の高さは
h-48です。classNameで変えます（h-56など）
使い分け
| 見せたいもの | 部品 |
|---|---|
| 日・月ごとの量（売上・件数） | Bar Chart |
| 推移・累計（右肩上がりかどうか） | Line Chart |
| 全体に占める割合（券種・内訳） | Donut Chart |
| 項目の順位（公演ごと・ページごと） | Bar List |
| 数字に添える小さな推移 | Sparkline |
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・getColorは使わない |
stacked | boolean | false | 系列を横に並べず1本に積む |
color | ChartColor | 'base' | 1系列のときの棒の色 |
getColor | (datum: T, index: number) => ChartColor | undefined | - | 1系列のとき、棒ごとに色を変える |
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 | - | グラフの名前（読み上げ用） |