棒グラフBarChartExperimental
平均値マーカー付きの縦棒・横棒チャートです。
プレビュー
状態とバリエーション
縦棒
カテゴリ別の量を縦方向の高さで比較する標準の SSOT variant です。
月火水木金
基準線と値表示
平均値や目標値を破線で重ね、各棒の値も表示する状態です。
42
58
36
68
54
月火水木金
閾値トーン（上限超え）
threshold を渡すと上限ラインを引き、それを超えた棒を destructive トーンで塗ります。スライダーで上限を動かすと、棒が超過した瞬間に色が変わります。
42
68
51
73
38
A棟B棟C棟D棟E棟
横棒
項目名が長い比較やランキングで使う SSOT variant です。
検索
74
SNS
48
広告
62
紹介
31
補助線とラベルなし
カード内の小さな推移表示など、周辺文脈で項目が分かる場合の props 状態です。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| data | { label?: ReactNode; value: number; color?: ChartColor }[] | - | 表示する棒のデータです。値は max を基準に正規化されます。 |
| variant | "horizontal" | "vertical" | "vertical" | 棒の向きを切り替える SSOT 登録済みバリアントです。 |
| max | number | - | 明示的な最大値です。未指定時は data または基準値の最大値を使います。 |
| averageValue | number | - | 任意の平均値・基準値マーカーです。 |
| averageLabel | ReactNode | "Average" | 平均値・基準値マーカーのツールチップとアクセシブルラベルです。 |
| threshold | number | - | 容量・上限ライン。これを超えた棒を thresholdTone で塗り（超過＝bad）、基準線を描きます。(#285) |
| thresholdLabel | ReactNode | "Limit" | 閾値ラインのツールチップとアクセシブルラベルです。 |
| thresholdTone | ChartTone | "destructive" | 閾値を超えた棒に適用するトーンです。 |
| showGrid | boolean | true | 縦棒表示の横方向の補助線を表示します。 |
| showLabels | boolean | true | 棒の横または下にカテゴリラベルを表示します。 |
| showValues | boolean | false | 横棒では棒の横に、縦棒では棒の上にフォーマット済みの値を表示します。 |
| formatValue | (value: number) => ReactNode | - | 棒、平均値マーカー、ツールチップの値を整形します。 |
使い方
import { BarChart } from "@gunjo/ui";
const data = [
{ label: "月", value: 42, color: "primary" },
{ label: "火", value: 58, color: "success" },
{ label: "水", value: 36, color: "warning" },
{ label: "木", value: 68, color: "info" },
];
export function BarChartUsage() {
return (
<div className="grid gap-6">
<BarChart data={data} />
<BarChart data={data} variant="horizontal" showValues />
<BarChart data={data} averageValue={50} averageLabel="平均" />
<BarChart data={data} showGrid={false} showLabels={false} />
</div>
);
}設計の判断
- 基線を動かす指定を、作りませんでした。資料は「縦軸はゼロから始める」を最優先の判断に挙げています。GUNJO の
BarChartには下端を決める prop がありません。棒の長さは常に「値 ÷ 上端 × 100」で、maxは上端を上げるだけです。差が小さくて読み取れないときに軸を切る、という逃げ道を部品の側で塞いでいます。 - 上限の超過は、色と同時に読み上げ名にも入ります。
thresholdを渡すと上限の線が引かれ、超えた棒がthresholdTone（既定はdestructive）で塗られます。それだけでは色だけの合図になるので、超えた棒のaria-labelの末尾に「(over Limit)」が付きます（#285）。画面の上でも文字にしたいときはshowValuesを足してください。上端はmax・averageValue・threshold・データの最大値のうち最も大きいものになるので、線が枠の外に出ることはありません。thresholdLabelとaverageLabelの既定は英語なので、日本語の画面では渡し直します。 - 数値の整形は、呼ぶ側に残しました。
formatValueは関数を渡す prop なので、サーバーコンポーネントからは渡せません。PieChartなどにはシリアライズできるvalueFormatを足しましたが（#338）、BarChartにはまだありません。桁区切りを変えたいときは"use client"の境界を挟みます。棒は div の幅と高さで描いていて SVG ではないので、色はChartToneの名前で渡します。綴りを間違えた色は開発中に一度だけ警告が出ます（#296）。
UIXHERO: 棒グラフ（Bar Chart）