棒グラフBarChartExperimental
平均値マーカー付きの縦棒・横棒チャートです。
プレビュー
状態とバリエーション
縦棒
カテゴリ別の量を縦方向の高さで比較する標準の SSOT variant です。
月火水木金
基準線と値表示
平均値や目標値を破線で重ね、各棒の値も表示する状態です。
42
58
36
68
54
月火水木金
横棒
項目名が長い比較やランキングで使う 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" | 平均値・基準値マーカーのツールチップとアクセシブルラベルです。 |
| showGrid | boolean | true | 縦棒表示の横方向の補助線を表示します。 |
| showLabels | boolean | true | 棒の横または下にカテゴリラベルを表示します。 |
| showValues | boolean | false | 横棒では棒の横に、縦棒では棒の上にフォーマット済みの値を表示します。 |
| formatValue | (value: number) => ReactNode | - | 棒、平均値マーカー、ツールチップの値を整形します。 |
使い方
Loading...