Area Charts

1import { CustomAreaChart } from "@/registry/ui";
2
3const data = [
4  { label: "W1", adoption: 42, retained: 18 },
5  { label: "W2", adoption: 56, retained: 26 },
6  { label: "W3", adoption: 68, retained: 34 },
7  { label: "W4", adoption: 81, retained: 44 },
8  { label: "W5", adoption: 92, retained: 55 },
9  { label: "W6", adoption: 105, retained: 62 },
10  { label: "W7", adoption: 117, retained: 73 },
11];
12const dataKeys = [
13  { key: "adoption", label: "Adoption", color: "var(--chart-2)" },
14  { key: "retained", label: "Retained", color: "var(--chart-4)" },
15];
16
17export function AreaChartExample() {
18  return (
19    <div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-6 text-left lg:grid-cols-2">
20      <CustomAreaChart
21        title="Feature adoption pulse"
22        description="Adoption and retention trajectory after rollout."
23        stacked
24        data={data}
25        dataKeys={dataKeys}
26        stylePreset="glass"
27      />
28    </div>
29  );
30}