ドーナツチャートDonutChartExperimental

中央ラベル付きで構成比を示すドーナツチャートです。

プレビュー

データ

状態とバリエーション

標準表示

中央値付きのドーナツで構成比を示す、SSOT 登録済みの標準バリエーションです。

凡例付き

セグメントのラベル、割合、元の値をドーナツの下で確認する状態です。

コア46%
成長28%
継続18%
拡張8%

コンパクト

狭いカードやサイドパネルでサイズを抑える SSOT 登録済みバリエーションです。

太いリング

強い視認性が必要な場合は、くり抜き幅を調整してリングを太くできます。

コア46%
成長28%
継続18%
拡張8%

値の整形

割合は自動計算し、ツールチップや凡例に表示する元の値だけを整形します。

プロダクト48%
運用30.5%
サポート14.9%
予備6.5%

セグメント多め

6 区分程度の構成比でも、ドーナツと凡例を合わせて確認できます。

検索34%
SNS22%
メール16%
広告12%
提携9%
その他7%

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
segments{ label?: ReactNode; value: number; color?: ChartColor }[]-円環の比率として表示するセグメントです。
variant"compact" | "default""default"チャートサイズを切り替える SSOT 登録済みバリエーションです。
centerValueReactNode-ドーナツ中央に表示する主要な値です。
centerLabelReactNode-中央値の下に表示する補足ラベルです。
thicknessnumber-内側のくり抜き幅をピクセルで指定します。
showLegendbooleanfalseドーナツの下にチャート凡例を表示します。
formatValue(value: number) => ReactNode-ツールチップと凡例説明に表示する生のセグメント値を整形します。
totalLabelReactNode"Total"凡例ツールチップで生のセグメント値の前に表示するラベルです。

使い方

import { DonutChart } from "@gunjo/ui";

const segments = [
    { label: "自然流入", value: 46, color: "primary" },
    { label: "紹介", value: 28, color: "success" },
    { label: "直接", value: 18, color: "warning" },
    { label: "広告", value: 8, color: "info" },
];

<DonutChart segments={segments} />
<DonutChart segments={segments} centerValue="100" centerLabel="合計" totalLabel="合計" showLegend />
<DonutChart segments={segments} variant="compact" thickness={18} />
<DonutChart segments={segments} formatValue={(value) => `${value.toLocaleString()}円`} />

使用コンポーネント

ドーナツチャートチャート凡例ツールチップ

関連コンポーネント

ラベル付きドーナツカード円グラフ分布バー分析カード