ラジアルバーチャートRadialBarChartExperimental
進捗・比率・容量を同心円のバーで比較するチャートです。
プレビュー
状態とバリエーション
標準表示
標準サイズでラジアル値を比較します。
64%平均
凡例付き
リング下にラベルと値を表示します。
64%平均
サイト78
市場64
購入49
コンパクト
狭いカード向けのコンパクトサイズです。
64%
太いバー
視認性を高めるためバーを太くします。
サイト78
市場64
購入49
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| data | ChartDataPoint[] | - | 同心円バーとして表示する系列値です。 |
| variant | "default" | "compact" | "default" | チャートサイズを切り替える SSOT 登録済みバリエーションです。 |
| centerValue / centerLabel | ReactNode | - | 中央に表示する任意の概要テキストです。 |
| 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 data = [
{ label: "サイト", value: 78, color: "primary" },
{ label: "市場", value: 64, color: "success" },
{ label: "購入", value: 49, color: "warning" },
];
<RadialBarChart data={data} />
<RadialBarChart data={data} showLegend maxLabel="最大" />
<RadialBarChart data={data} variant="compact" centerValue="64%" />