ドーナツチャート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" },
];

export function DonutChartUsage() {
    return (
        <div className="grid gap-6">
            <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() + "円"}
            />
        </div>
    );
}

設計の判断

  • 中央の数字は、図の外の要素です。資料は「中央の数字を SVG の中に閉じ込めない」を挙げています。GUNJO の DonutChart はリングを conic-gradient で描き、centerValue と centerLabel はその上に重ねた普通の HTML の要素です。読み上げにも、文字の拡大にも乗ります。
  • 中央の値を、部品は計算しません。centerValue は呼ぶ側が渡します。中央に置くものが合計とは限らないからです（達成率、母数、前期比のどれもあり得ます）。資料の「中央とリングで同じことを2回言わない」を、部品が勝手に合計を出さないことで書く人の判断に残しました。
  • くり抜きは、カードの色で塗っています。中央の穴は thickness ピクセルぶん内側に置いた円で、色は bg-card です。カードの上に置く前提の作りなので、違う色の面に置くときは重なりを確かめてください。thickness の既定は 24（compact は 18）です。数値の整形は formatValue だけで、シリアライズできる valueFormat は DonutChart にはまだありません。サーバーコンポーネントからは渡せないので、"use client" の境界を挟みます（#338）。
    UIXHERO: ドーナツチャート（Donut Chart）

使用コンポーネント

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

関連コンポーネント

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