ex-area-chart

1"use client";
2 
3import { EvilAreaChart } from "@/registry/charts/recharts-area-chart";
4import { type ChartConfig } from "@/registry/ui/recharts-chart";
5 
6const data = [
7  { month: "January", desktop: 342, mobile: 245 },
8  { month: "February", desktop: 876, mobile: 654 },
9  { month: "March", desktop: 512, mobile: 387 },
10  { month: "April", desktop: 629, mobile: 521 },
11  { month: "May", desktop: 458, mobile: 412 },
12  { month: "June", desktop: 781, mobile: 598 },
13  { month: "July", desktop: 394, mobile: 312 },
14  { month: "August", desktop: 925, mobile: 743 },
15  { month: "September", desktop: 647, mobile: 489 },
16  { month: "October", desktop: 532, mobile: 476 },
17  { month: "November", desktop: 803, mobile: 687 },
18  { month: "December", desktop: 271, mobile: 198 },
19];
20 
21const chartConfig = {
22  desktop: {
23    label: "Desktop",
24    colors: {
25      light: ["#047857"],
26      dark: ["#10b981"],
27    },
28  },
29  mobile: {
30    label: "Mobile",
31    colors: {
32      light: ["#be123c"],
33      dark: ["#f43f5e"],
34    },
35  },
36} satisfies ChartConfig;
37 
38export function EvilExampleAreaChart() {
39  return (
40    <EvilAreaChart
41      data={data}
42      config={chartConfig}
43      className="h-full w-full p-4"
44      stackType="stacked"
45      xDataKey="month"
46    >
47      <EvilAreaChart.Grid />
48      <EvilAreaChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
49      <EvilAreaChart.Brush formatLabel={(value) => String(value).substring(0, 3)} />
50      <EvilAreaChart.Legend isClickable />
51      <EvilAreaChart.Tooltip />
52      <EvilAreaChart.Area dataKey="desktop" variant="gradient" isClickable>
53        <EvilAreaChart.Dot variant="border" />
54        <EvilAreaChart.ActiveDot variant="colored-border" />
55      </EvilAreaChart.Area>
56      <EvilAreaChart.Area dataKey="mobile" variant="gradient" isClickable>
57        <EvilAreaChart.Dot variant="border" />
58        <EvilAreaChart.ActiveDot variant="colored-border" />
59      </EvilAreaChart.Area>
60    </EvilAreaChart>
61  );
62}