Radial Charts

1import { HealthOverviewGrid, RadialProgress } from "@/registry/ui";
2
3export function RadialChartExample() {
4  return (
5    <div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-6 text-left md:grid-cols-2 lg:grid-cols-4">
6      <RadialProgress
7        value={96.2}
8        color="var(--chart-1)"
9        title="Availability"
10        label="30-day SLA"
11        stylePreset="signal"
12      />
13      <RadialProgress
14        value={84}
15        color="var(--chart-2)"
16        title="On-time delivery"
17        label="Sprint throughput"
18        stylePreset="glass"
19      />
20      <div className="md:col-span-2 lg:col-span-2">
21        <HealthOverviewGrid
22          errorRate={8}
23          uptime={99.94}
24          burnRate={32}
25          stylePreset="terminal"
26        />
27      </div>
28    </div>
29  );
30}