ドーナツチャートDonutChartExperimental
中央ラベル付きで構成比を示すドーナツチャートです。
プレビュー
状態とバリエーション
標準表示
中央値付きのドーナツで構成比を示す、SSOT 登録済みの標準バリエーションです。
100合計
凡例付き
セグメントのラベル、割合、元の値をドーナツの下で確認する状態です。
100合計
コア46%
成長28%
継続18%
拡張8%
コンパクト
狭いカードやサイドパネルでサイズを抑える SSOT 登録済みバリエーションです。
100%構成比
太いリング
強い視認性が必要な場合は、くり抜き幅を調整してリングを太くできます。
100%構成比
コア46%
成長28%
継続18%
拡張8%
値の整形
割合は自動計算し、ツールチップや凡例に表示する元の値だけを整形します。
27.5万円予算
プロダクト48%
運用30.5%
サポート14.9%
予備6.5%
セグメント多め
6 区分程度の構成比でも、ドーナツと凡例を合わせて確認できます。
6チャネル
検索34%
SNS22%
メール16%
広告12%
提携9%
その他7%
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| segments | { label?: ReactNode; value: number; color?: ChartColor }[] | - | 円環の比率として表示するセグメントです。 |
| variant | "compact" | "default" | "default" | チャートサイズを切り替える SSOT 登録済みバリエーションです。 |
| centerValue | ReactNode | - | ドーナツ中央に表示する主要な値です。 |
| centerLabel | ReactNode | - | 中央値の下に表示する補足ラベルです。 |
| thickness | number | - | 内側のくり抜き幅をピクセルで指定します。 |
| showLegend | boolean | false | ドーナツの下にチャート凡例を表示します。 |
| formatValue | (value: number) => ReactNode | - | ツールチップと凡例説明に表示する生のセグメント値を整形します。 |
| totalLabel | ReactNode | "Total" | 凡例ツールチップで生のセグメント値の前に表示するラベルです。 |
使い方
Loading...