Donut Chart

fandhe-frontend-pre-styled-ui の donut_chart mod が提供するスタイル済み Donut Chart 部品です。

イシュー #2084 で shadcn/ui Charts（pie、11 バリアント）と突合し、セパレータ有無・値/カテゴリラベルの内側/外側配置・セグメント強調（active_index）・中央テキスト（center_text）の静的バリアントを DonutChartProps の純追加で補完しました。マウス追従ツールチップ・hover 強調・期間切替・凡例トグルのような実行時インタラクションは対象外（#2128/#2132）です。

Demo

外部依存ゼロの SVG ノード木生成によるドーナツグラフ（イシュー #850。イシュー #2084 で shadcn/ui Charts（pie、11 バリアント）と突合し、separator/label_content/label_position/active_index/center_text を補完した。実行時インタラクション〔ツールチップ・期間切替〕は対象外、#2128/#2132）。inner_ratio（既定 0.6）で内径を調整できます。active_index で特定セグメントを強調表示し、center_text で中央テキストを描画します。

Size

Variant

Features

外部依存ゼロの SVG ノード木生成によるドーナツグラフ
inner_ratio（既定 0.6）で内径を調整できる
show_labels を有効にするとラベルをセグメント上に描画する（pie_chart と同じ label_content/label_position）
size（Xs〜Xl）で寸法を切り替える
ラベルは背景色ハロー + 環帯中心配置で系列色・ダーク時も可読
イシュー #2084 で shadcn/ui Charts（pie、11 バリアント）と突合し、active_index（セグメント強調）・center_text（中央テキスト）・separator を補完した。マウス追従ツールチップは対象外（#2128）。期間切替（data-range）・凡例トグルの SSR 構造（range/hidden_categories/hidden_series）は #2133 で追加済み、実データ連動は #2134

Anatomy

root
  chart
    segment
    label
    center-value
    center-label

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Md`	寸法 variant。
`inner_ratio`	`f64`	`0.6`	外径に対する内径の比率。0.0 < ratio < 1.0 の範囲・有限値であること。
`show_labels`	`bool`	`false`	true ならラベルをセグメント上に描画する。
`separator`	`PieSeparator`	`Line`	セグメント間セパレータ。None でセパレータ線を消す（イシュー #2084）。
`label_content`	`PieLabelContent`	`Category`	show_labels 有効時のラベル内容（イシュー #2084）。
`label_position`	`PieLabelPosition`	`Inside`	show_labels 有効時のラベル配置（イシュー #2084）。
`active_index`	`Option<usize>`	`None`	強調表示するセグメントのカテゴリ index。範囲外はエラー（イシュー #2084）。
`center_text`	`Option<PieCenterText>`	`None`	中央テキスト（value・任意の label）。合計値の算出は呼び出し側の責務（イシュー #2084）。

Data Attributes

Part	Attribute	Observed Values
`label`	`data-index`	`0`, `1`, `2`, `3`
`segment`	`data-active`	（値なし）
`segment`	`data-index`	`0`, `1`, `2`, `3`

CSS Variables

Variable	Default
`--fandhe-donut-chart-size`	—

Examples

内径調整・強調・中央テキスト

薄いリング（inner_ratio=0.85）・active_index による強調・center_text の掲示です。