Bar Charts

1import { CustomBarChart } from "@/registry/ui";
2
3const channelData = [
4  { label: "SEO", visits: 3420 },
5  { label: "Paid", visits: 2180 },
6  { label: "Referral", visits: 1640 },
7  { label: "Direct", visits: 1280 },
8  { label: "Email", visits: 950 },
9  { label: "Social", visits: 780 },
10];
11
12const dataKeys = [{ key: "visits", label: "Visits", color: "var(--chart-1)" }];
13
14export function BarChartExample() {
15  return (
16    <div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-6 text-left lg:grid-cols-2">
17      <CustomBarChart
18        title="Acquisition channels"
19        description="Traffic contribution by channel for this sprint."
20        data={channelData}
21        dataKeys={dataKeys}
22        stylePreset="terminal"
23      />
24      <CustomBarChart
25        title="Pipeline progression"
26        description="Lead counts across qualification stages."
27        surface="muted"
28        stylePreset="signal"
29        data={[
30          { label: "Prospect", enterprise: 840, selfServe: 320 },
31          { label: "Qualified", enterprise: 640, selfServe: 280 },
32          { label: "Trial", enterprise: 380, selfServe: 210 },
33          { label: "Converted", enterprise: 184, selfServe: 132 },
34        ]}
35        dataKeys={[
36          { key: "enterprise", label: "Enterprise", color: "var(--chart-2)" },
37          { key: "selfServe", label: "Self-serve", color: "var(--chart-4)" },
38        ]}
39      />
40      <CustomBarChart
41        title="Deploy quality trend"
42        description="Passed vs failed deploy checks by day."
43        stacked
44        stylePreset="glass"
45        data={[
46          { label: "Mon", passed: 84, failed: 6 },
47          { label: "Tue", passed: 92, failed: 8 },
48          { label: "Wed", passed: 88, failed: 5 },
49          { label: "Thu", passed: 95, failed: 7 },
50          { label: "Fri", passed: 97, failed: 3 },
51        ]}
52        dataKeys={[
53          { key: "passed", label: "Passed", color: "var(--chart-2)" },
54          { key: "failed", label: "Failed", color: "var(--destructive)" },
55        ]}
56      />
57    </div>
58  );
59}