Category and radial charts
Category x on the shared chart, and shares, progress and rhythm in polar geometry.
RadialChartCardProgressCardActivityRingCardChart
A shared Chart can use a category x with ChartPlot bars. Keyboard and pointer inspection, visibility and lifecycle stay in the shared runtime. Time ranges, linked x inspection, focus and brush do not apply to categories. See Data and identity for identity versus label.
RadialChartCard shows parts of a whole from a text category and a non-negative value. variant is donut (default), pie, semi or rings. A null value stays in the legend as "No data" but takes no room in the circle, and a negative value shows an error rather than a misleading chart.
When a slice's color means something, fix it with colors, keyed by category name; the rest take the palette and keep their color as values change. To share a selection with your own controls, own it with selected and onSelectedChange. center replaces what the middle of a donut shows.
ProgressCard measures one value against a target. ActivityRingCard places readings round a day in buckets, such as bucketMinutes={40} for 36 positions; missing buckets stay distinct from zero.
TypeScript
const [severity, setSeverity] = useState<string | null>(null);
<SeverityButtons value={severity} onChange={setSeverity} />
<RadialChartCard
title="Active alarms"
data={alarms}
category="severity"
value="count"
colors={{ Critical: '#ef4444', Urgent: '#f97316', Advisory: '#f59e0b' }}
selected={severity}
onSelectedChange={setSeverity}
center={({ category, value }) => <strong>{value} {category}</strong>}
/>