チャート凡例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",
},
];
export function ChartLegendUsage() {
return (
<div className="grid gap-6">
<ChartLegend items={items} />
<ChartLegend items={items} variant="vertical" />
<ChartLegend items={itemsWithoutValues} />
</div>
);
}