分布バーDistributionBarExperimental
セグメントやチャネル構成を示す積み上げ割合バーです。
プレビュー
状態とバリエーション
標準表示
バー単体で構成比だけを示す、SSOT 登録済みの標準バリエーションです。
凡例付き
セグメントのラベル、割合、元の値をバーの下で確認する状態です。
自然流入46%
紹介28%
直接18%
広告8%
値の整形
割合は自動計算し、ツールチップや凡例に表示する元の値だけを整形します。
プロダクト48%
運用30.5%
サポート14.9%
予備6.5%
セグメント多め
6 区分程度の細かい構成比でも、バーと凡例を合わせて確認できます。
検索34%
SNS22%
メール16%
広告12%
提携9%
その他7%
小さいセグメント
1〜5% 程度の小さい区分も、フォーカスとツールチップで確認できる状態です。
完了92%
確認中5%
停止中2%
未割当1%
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| segments | { label?: ReactNode; value: number; color?: ChartColor }[] | - | 積み上げ割合バーに正規化して表示するセグメントです。 |
| showLegend | boolean | false | バーの下にチャート凡例を表示します。 |
| formatValue | (value: number) => ReactNode | - | ツールチップと凡例説明に表示する生のセグメント値を整形します。 |
| totalLabel | ReactNode | "Total" | 凡例ツールチップで生のセグメント値の前に表示するラベルです。 |
使い方
Loading...