ex-brush-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  { date: "June 1", desktop: 412, mobile: 268 },
8  { date: "June 2", desktop: 468, mobile: 301 },
9  { date: "June 3", desktop: 501, mobile: 334 },
10  { date: "June 4", desktop: 486, mobile: 312 },
11  { date: "June 5", desktop: 523, mobile: 349 },
12  { date: "June 6", desktop: 297, mobile: 198 },
13  { date: "June 7", desktop: 264, mobile: 173 },
14  { date: "June 8", desktop: 534, mobile: 356 },
15  { date: "June 9", desktop: 578, mobile: 384 },
16  { date: "June 10", desktop: 612, mobile: 402 },
17  { date: "June 11", desktop: 596, mobile: 391 },
18  { date: "June 12", desktop: 641, mobile: 428 },
19  { date: "June 13", desktop: 351, mobile: 236 },
20  { date: "June 14", desktop: 318, mobile: 211 },
21  { date: "June 15", desktop: 663, mobile: 441 },
22  { date: "June 16", desktop: 702, mobile: 467 },
23  { date: "June 17", desktop: 688, mobile: 452 },
24  { date: "June 18", desktop: 731, mobile: 489 },
25  { date: "June 19", desktop: 754, mobile: 503 },
26  { date: "June 20", desktop: 402, mobile: 271 },
27  { date: "June 21", desktop: 376, mobile: 249 },
28  { date: "June 22", desktop: 769, mobile: 512 },
29  { date: "June 23", desktop: 812, mobile: 538 },
30  { date: "June 24", desktop: 798, mobile: 524 },
31  { date: "June 25", desktop: 843, mobile: 561 },
32  { date: "June 26", desktop: 867, mobile: 579 },
33  { date: "June 27", desktop: 451, mobile: 302 },
34  { date: "June 28", desktop: 428, mobile: 287 },
35  { date: "June 29", desktop: 881, mobile: 594 },
36  { date: "June 30", desktop: 926, mobile: 618 },
37];
38 
39const chartConfig = {
40  desktop: {
41    label: "Desktop",
42    colors: {
43      light: ["#047857"],
44      dark: ["#10b981"],
45    },
46  },
47  mobile: {
48    label: "Mobile",
49    colors: {
50      light: ["#be123c"],
51      dark: ["#f43f5e"],
52    },
53  },
54} satisfies ChartConfig;
55 
56export function EvilExampleBrushAreaChart() {
57  return (
58    <EvilAreaChart
59      data={data}
60      config={chartConfig}
61      className="h-full w-full p-4"
62      curveType="monotone"
63      xDataKey="date"
64    >
65      <EvilAreaChart.Grid />
66      <EvilAreaChart.XAxis dataKey="date" tickFormatter={(value) => value.split(" ")[1]} />
67      <EvilAreaChart.Brush
68        height={56} // [!code highlight]
69        formatLabel={(value) => String(value)} // [!code highlight]
70      />
71      <EvilAreaChart.Legend isClickable />
72      <EvilAreaChart.Tooltip />
73// … truncated