ex-brush-echarts-area-chart

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