リボンチャートRibbonChartExperimental
期間ごとの流量や構成量の広がりを示すリボンチャートです。
プレビュー
状態とバリエーション
フロー
量の変化を中央寄せの流れとして表示します。
1月2月3月4月5月6月
新規244
継続204
拡張160
積み上げ
合計量を読みやすい積み上げ面で表示します。
1月2月3月4月5月6月
新規244
継続204
拡張160
ラベルなし
コンパクトな領域では期間ラベルを非表示にできます。
最大値指定
複数のリボンチャートを同じスケールで比較します。
1月2月3月4月5月6月
新規244
継続204
拡張160
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| layers | RibbonChartLayer[] | - | 幅が変化するリボンとして表示するレイヤーと値です。 |
| variant | "flow" | "stacked" | "flow" | 中央寄せのフロー表示と積み上げ表示を切り替える SSOT 登録済みバリエーションです。 |
| max | number | - | 複数チャートを同じスケールで比較するための最大合計値です。 |
| totalLabel | ReactNode | "Total" | 凡例ツールチップの説明に使う合計ラベルです。 |
| showLegend | boolean | false | レイヤー合計のチャート凡例を表示します。 |
| showLabels | boolean | true | リボン下の期間ラベルの表示を切り替えます。 |
| formatValue | (value: number) => ReactNode | - | 各値を整形します。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。RSC 安全な整形には valueFormat を使う。 |
| valueFormat | "number" | "compact" | "integer" | Intl.NumberFormatOptions | - | シリアライズ可能な数値フォーマット＝formatValue の RSC 安全な代替。formatValue 指定時は無視。en-US ロケール固定。(#338) |
使い方
const layers = [
{ label: "新規", color: "primary", data: [{ label: "1月", value: 22 }, { label: "2月", value: 30 }, { label: "3月", value: 36 }, { label: "4月", value: 44 }, { label: "5月", value: 52 }, { label: "6月", value: 60 }] },
{ label: "継続", color: "success", data: [{ label: "1月", value: 16 }, { label: "2月", value: 22 }, { label: "3月", value: 30 }, { label: "4月", value: 38 }, { label: "5月", value: 46 }, { label: "6月", value: 52 }] },
{ label: "拡張", color: "warning", data: [{ label: "1月", value: 8 }, { label: "2月", value: 14 }, { label: "3月", value: 22 }, { label: "4月", value: 30 }, { label: "5月", value: 38 }, { label: "6月", value: 48 }] },
];
<RibbonChart layers={layers} />
<RibbonChart layers={layers} variant="flow" showLegend totalLabel="合計" />
<RibbonChart layers={layers} variant="stacked" />