PieChart

割合や構成比を直感的に表現する円グラフコンポーネントです。 Pie（円）とDonut（ドーナツ）の2バリアントがあり、ラベル位置や中央テキストも自由にカスタマイズできます。

Variants

Label Mode

Indicator

Recharts

Base

Playground

Preview

Pie3 slices

Variant

Label

Slices

Options

<Chart config={chartConfig} className="w-full mx-auto aspect-square max-h-[300px]">
  <PieChart accessibilityLayer>
    <Chart.Tooltip content={<Chart.TooltipContent hideLabel />} />
    <Chart.Legend content={<Chart.LegendContent nameKey="key" />} />
    <Chart.Pie data={chartData} dataKey="value" nameKey="name" />
  </PieChart>
</Chart>

JSX Composition

Chart.* は当ライブラリから、その他は Recharts からインポートしてください。

Legend<Chart.Legend />

Center LabelCSSオーバーレイ（donutのみ）

Patterns

PieChartの主要な表示パターンです。用途に応じて使い分けてください。

Default Pie

基本的な円グラフ

Donut

ドーナツ型 + 中央ラベル

925Total

Outside Labels

外部ラベル + 凡例付き

Styled Donut

パディング + 角丸のスタイル付きドーナツ

API

Component Structure

Chart— Recharts

.PieProps.Tooltip.TooltipContentProps.Legend.LegendContent

.PiePropsパイ（variant・label・activeShape）

.Tooltipツールチップラッパー

.TooltipContentPropsツールチップ内容

.Legendレジェンドラッパー

.LegendContentレジェンド内容

Props

Chart

config—

ChartConfig

チャートの設定オブジェクト (ラベル・カラー定義)

children—

ReactElement

Rechartsチャートコンポーネント

idundefined

string

チャートのユニークID (CSS変数スコーピング用)

Name	Type	Default	Description
`config`	`ChartConfig`	`—`	チャートの設定オブジェクト (ラベル・カラー定義)
`children`	`ReactElement`	`—`	Rechartsチャートコンポーネント
`id`	`string`	`undefined`	チャートのユニークID (CSS変数スコーピング用)

Chart.Pie

variant"pie"

"pie" | "donut"

形状。"donut" は innerRadius を自動設定

label"none"

"none" | "outside" | "inside"

ラベル位置。outside=引き出し線、inside=スライス内部 (小さいスライスは自動非表示)

labelContent"value"

"value" | "percent"

ラベルに表示する内容

activeShapetrue

boolean

ホバー時にスライスを拡大する効果

innerRadius0 (pie) / 60 (donut)

number

内側の半径。variant で自動設定されるが、直接上書きも可能

paddingAngle0

number

スライス間の間隔 (度)

cornerRadius0

number

スライスの角丸

startAngle90

number

開始角度 (90 = 12時方向)

endAngle-270

number

終了角度

Name	Type	Default	Description
`variant`	`"pie" \| "donut"`	`"pie"`	形状。"donut" は innerRadius を自動設定
`label`	`"none" \| "outside" \| "inside"`	`"none"`	ラベル位置。outside=引き出し線、inside=スライス内部 (小さいスライスは自動非表示)
`labelContent`	`"value" \| "percent"`	`"value"`	ラベルに表示する内容
`activeShape`	`boolean`	`true`	ホバー時にスライスを拡大する効果
`innerRadius`	`number`	`0 (pie) / 60 (donut)`	内側の半径。variant で自動設定されるが、直接上書きも可能
`paddingAngle`	`number`	`0`	スライス間の間隔 (度)
`cornerRadius`	`number`	`0`	スライスの角丸
`startAngle`	`number`	`90`	開始角度 (90 = 12時方向)
`endAngle`	`number`	`-270`	終了角度

Chart.TooltipContent

indicator"dot"

"dot" | "line" | "dashed"

インジケーターの形状

hideLabelfalse

boolean

ラベルを非表示にする

hideIndicatorfalse

boolean

インジケーターを非表示にする

colorundefined

string

インジケーターの色を直接指定

nameKeyundefined

string

データキーの名前マッピング

labelKeyundefined

string

ラベルキーのマッピング

labelFormatterundefined

(value, payload) => ReactNode

ラベルのカスタムフォーマッター

formatterundefined

(value, name, item, index, payload) => ReactNode

値のカスタムフォーマッター

Name	Type	Default	Description
`indicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	インジケーターの形状
`hideLabel`	`boolean`	`false`	ラベルを非表示にする
`hideIndicator`	`boolean`	`false`	インジケーターを非表示にする
`color`	`string`	`undefined`	インジケーターの色を直接指定
`nameKey`	`string`	`undefined`	データキーの名前マッピング
`labelKey`	`string`	`undefined`	ラベルキーのマッピング
`labelFormatter`	`(value, payload) => ReactNode`	`undefined`	ラベルのカスタムフォーマッター
`formatter`	`(value, name, item, index, payload) => ReactNode`	`undefined`	値のカスタムフォーマッター

Chart.LegendContent

hideIconfalse

boolean

アイコンを非表示にする

nameKeyundefined

string

データキーの名前マッピング

verticalAlign"bottom"

"top" | "middle" | "bottom"

垂直位置

align"center"

"left" | "center" | "right"

水平位置

layout"horizontal"

"horizontal" | "vertical"

レイアウト方向

Name	Type	Default	Description
`hideIcon`	`boolean`	`false`	アイコンを非表示にする
`nameKey`	`string`	`undefined`	データキーの名前マッピング
`verticalAlign`	`"top" \| "middle" \| "bottom"`	`"bottom"`	垂直位置
`align`	`"left" \| "center" \| "right"`	`"center"`	水平位置
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	レイアウト方向

Customization

ドーナツ型の中央ラベルはCSSオーバーレイで実装するため、HTMLコンテンツを自由にカスタマイズできます。

数値 + ラベル

925Total

<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
  <span className="text-3xl font-bold">925</span>
  <span className="text-sm text-text-muted">Total</span>
</div>

アイコン + パーセント

+12%Growth

<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
  <TrendingUp className="icon-md text-success" />
  <span className="text-lg font-bold">+12%</span>
  <span className="text-xs text-text-muted">Growth</span>
</div>

リッチコンテンツ

Revenue$4.2k+8.5%

<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
  <span className="text-xs text-text-muted">Revenue</span>
  <span className="text-2xl font-bold">$4.2k</span>
  <span className="text-xs font-semibold text-success">+8.5%</span>
</div>

Tip：中央ラベルはCSSオーバーレイ（absolute + pointer-events-none）で実装するため、テキスト・アイコン・カスタムコンポーネントなど、あらゆるHTMLコンテンツを自由に配置できます。

Anatomy

30%

Total82%

Desktop30%

Jan

Feb

Mar

Apr

May

Root

Chartラッパー

Chart Area

プロットエリア

Pie Segment

データスライス

Label

スライスラベル

Tooltip

ホバー情報

Legend

シリーズ凡例

Center Area

ドーナツ中央

Best Practices

✓

推奨

✓スライス数は5〜6個以内に抑える
✓ドーナツ型で中央に合計値やKPIを表示する
✓Tooltipで正確な数値を提供する
✓Legendで各スライスを識別可能にする
✓accessibilityLayerを必ず有効にする

避けるべき

✗7個以上のスライスで使わない（BarChartの方が適切）
✗類似した値が多い場合は避ける（差が見えない）
✗時系列データには使わない（LineChart推奨）
✗色だけで区別させない（Legendやラベルを併用）

Accessibility

キーボード操作

Tabチャートエリアにフォーカス

Arrow Keysスライス間の移動

ARIA / WCAG

Tooltipでデータ値をテキストで提供
Legendでスライスを識別可能
カラートークンでダークモード自動対応
activeShapeでホバーフィードバック提供
accessibilityLayer キーボード+SR対応

PieChart

Playground

Patterns

Default Pie

Donut

Outside Labels

Styled Donut

Tooltip Styles

Dot (default)

Line

Dashed

API

Component Structure

Props

Chart

Chart.Pie

Chart.TooltipContent

Chart.LegendContent

Customization

数値 + ラベル

アイコン + パーセント

リッチコンテンツ

Anatomy

Best Practices

推奨

避けるべき

Accessibility

キーボード操作

ARIA / WCAG

PieChart

Playground

Patterns

Default Pie

Donut

Outside Labels

Styled Donut

Tooltip Styles

Dot (default)

Line

Dashed

API

Component Structure

Props

Chart

Chart.Pie

Chart.TooltipContent

Chart.LegendContent

Customization

数値 + ラベル

アイコン + パーセント

リッチコンテンツ

Anatomy

Best Practices

推奨

避けるべき

Accessibility

キーボード操作

ARIA / WCAG

Related

BarChart

LineChart

AreaChart

MetricCard