チャート凡例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 登録済みバリアントです。 |
使い方
import { ChartLegend } from "@gunjo/ui";
const items = [
{ label: "自然流入", value: "46%", color: "primary", description: "合計: 12,400" },
{ label: "紹介", value: "28%", color: "success", description: "合計: 7,560" },
{ label: "直接", value: "18%", color: "warning", description: "合計: 4,860" },
];
const itemsWithoutValues = [
{ label: "検索", color: "primary" },
{ label: "SNS", color: "info" },
{ label: "広告", color: "warning" },
];
<ChartLegend items={items} />
<ChartLegend items={items} variant="vertical" />
<ChartLegend items={itemsWithoutValues} />