ChartPie

Pie Chart

Display proportions and percentages with circular slices representing data categories.

Basic

A simple three-slice pie.

func pieChartBasicPreview() templ.Component {
	return chartFrame("pie", map[string]any{
		"innerRadius": 0.0,
		"data": []map[string]any{
			{"label": "Desktop", "value": 46},
			{"label": "Mobile", "value": 32},
			{"label": "Tablet", "value": 22},
		},
	})
}

Donut

A ring-style breakdown for categories.

func pieChartDonutPreview() templ.Component {
	return chartFrame("pie", map[string]any{
		"innerRadius": 0.62,
		"data": []map[string]any{
			{"label": "Desktop", "value": 54},
			{"label": "Mobile", "value": 28},
			{"label": "Tablet", "value": 18},
		},
	})
}

Label

Center label with the main metric.

func pieChartLabelPreview() templ.Component {
	return chartFrame("pie", map[string]any{
		"innerRadius":   0.68,
		"centerLabel":   "72%",
		"centerCaption": "Completion",
		"data": []map[string]any{
			{"label": "Complete", "value": 72},
			{"label": "Remaining", "value": 28},
		},
	})
}