チャート凡例ChartLegendExperimental
チャート系列やセグメントのラベル・値を表示します。
プレビュー
状態とバリエーション
横並び
チャート下やカード内で複数系列を横に並べる標準の SSOT variant です。
自然流入46%
紹介28%
直接18%
縦並び
値を右端にそろえて、状態別の内訳を読みやすくする SSOT variant です。
完了128
進行中36
確認待ち14
差し戻し5
値なし
色と系列名だけを示し、数値はチャート側で読ませる状態です。
検索
SNS
広告
メール
その他
幅が狭い領域
横並び variant は狭い領域では折り返して、凡例がプレビュー外へはみ出さないようにします。
自然流入46%
紹介28%
直接18%
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | { label: ReactNode; value?: ReactNode; color?: ChartColor; description?: ReactNode }[] | - | チャート系列や分布セグメントに対応する凡例行です。description はツールチップとアクセシブルテキストに使われます。 |
| variant | "horizontal" | "vertical" | "horizontal" | 凡例の並び方を切り替える SSOT 登録済みバリアントです。 |
使い方
Loading...