Pie Charts

1import { CustomPieChart } from "@/registry/ui";
2
3const data = [
4  { name: "Starter", value: 275, color: "var(--chart-1)" },
5  { name: "Growth", value: 200, color: "var(--chart-2)" },
6  { name: "Scale", value: 187, color: "var(--chart-3)" },
7  { name: "Enterprise", value: 173, color: "var(--chart-4)" },
8  { name: "Free", value: 90, color: "var(--chart-5)" },
9];
10
11export function PieChartExample() {
12  return (
13    <div className="mx-auto flex w-full max-w-3xl flex-col gap-6 text-left">
14      <CustomPieChart
15        title="Plan distribution"
16        data={data}
17        innerRadius={48}
18        showTotalLabel
19        stylePreset="signal"
20      />
21      <CustomPieChart
22        title="Infrastructure mix"
23        description="Production workloads by backing service."
24        stylePreset="glass"
25        data={[
26          { name: "PostgreSQL", value: 45, color: "var(--chart-1)" },
27          { name: "SQLite", value: 25, color: "var(--chart-2)" },
28          { name: "MySQL", value: 20, color: "var(--chart-3)" },
29          { name: "MongoDB", value: 10, color: "var(--chart-5)" },
30        ]}
31      />
32      <CustomPieChart
33        title="Channel split"
34        description="New accounts by acquisition channel."
35        innerRadius={50}
36        showTotalLabel
37        stylePreset="terminal"
38        data={[
39          { name: "Outbound", value: 45, color: "var(--chart-1)" },
40          { name: "Inbound", value: 25, color: "var(--chart-2)" },
41          { name: "Partnership", value: 20, color: "var(--chart-3)" },
42          { name: "Community", value: 10, color: "var(--chart-5)" },
43        ]}
44      />
45    </div>
46  );
47}