Activity rings
Three goals at once, nested. Each ring fills toward its goal; the faint track shows what is left.
Preview
Activity
Today
Messages
1,592
Cards
105
Replies
52
Colour
Rings use chart slots 1–3, the three that stay apart for every kind of colour vision. The legend tiles carry the label and the number, so no ring is read by colour alone.
Usage
import { ActivityRings, ChartCard } from "@/charts";
<ChartCard title="Activity" range="Today">
<ActivityRings rings={[
{ label: "Messages", value: 1592, goal: 2000, display: "1,592", color: "var(--mf-chart-1)" },
…
]} />
</ChartCard>