ChartRadial
Radial Chart
Display progress, scores, or circular metrics with radial bar and gauge visualizations.
Basic
A circular progress gauge.
func radialChartBasicPreview() templ.Component {
return chartFrame("radial", map[string]any{
"value": 64,
"max": 100,
"centerLabel": "64%",
"centerCaption": "Progress",
})
}Label
A large value label in the center.
func radialChartLabelPreview() templ.Component {
return chartFrame("radial", map[string]any{
"value": 84,
"max": 100,
"centerLabel": "84",
"centerCaption": "Score",
})
}Shape
A segmented radial shape for comparison.
func radialChartShapePreview() templ.Component {
return chartFrame("radial", map[string]any{
"segments": []map[string]any{
{"label": "Core", "value": 42},
{"label": "Growth", "value": 26},
{"label": "Ops", "value": 18},
{"label": "R&D", "value": 14},
},
"centerLabel": "100",
"centerCaption": "Units",
})
}