ex-buffer-echarts-line-chart

1"use client";
2 
3import { EChartsLineChart, type ChartConfig } from "@/registry/charts/echarts-line-chart";
4 
5const data = [
6  { month: "January", desktop: 342, mobile: 184 },
7  { month: "February", desktop: 876, mobile: 491 },
8  { month: "March", desktop: 512, mobile: 290 },
9  { month: "April", desktop: 629, mobile: 391 },
10  { month: "May", desktop: 458, mobile: 309 },
11  { month: "June", desktop: 781, mobile: 449 },
12  { month: "July", desktop: 394, mobile: 234 },
13  { month: "August", desktop: 925, mobile: 557 },
14  { month: "September", desktop: 647, mobile: 367 },
15  { month: "October", desktop: 532, mobile: 357 },
16  { month: "November", desktop: 803, mobile: 515 },
17  { month: "December", desktop: 271, mobile: 149 },
18];
19 
20const chartConfig = {
21  desktop: {
22    label: "Desktop",
23    colors: {
24      light: ["#047857"],
25      dark: ["#10b981"],
26    },
27  },
28  mobile: {
29    label: "Mobile",
30    colors: {
31      light: ["#be123c"],
32      dark: ["#f43f5e"],
33    },
34  },
35} satisfies ChartConfig;
36 
37export function EChartsExampleLineChart() {
38  return (
39    <EChartsLineChart
40      data={data}
41      config={chartConfig}
42      className="h-full w-full p-4"
43      xDataKey="month"
44    >
45      <EChartsLineChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
46      <EChartsLineChart.Brush />
47      <EChartsLineChart.Legend isClickable />
48      <EChartsLineChart.Tooltip />
49      <EChartsLineChart.Line
50        dataKey="desktop"
51        strokeVariant="solid"
52        enableBufferLine // [!code highlight]
53        isClickable
54      >
55        <EChartsLineChart.Dot variant="border" />
56        <EChartsLineChart.ActiveDot variant="colored-border" />
57      </EChartsLineChart.Line>
58      <EChartsLineChart.Line
59        dataKey="mobile"
60        strokeVariant="solid"
61        enableBufferLine // [!code highlight]
62        isClickable
63      >
64        <EChartsLineChart.Dot variant="border" />
65        <EChartsLineChart.ActiveDot variant="colored-border" />
66      </EChartsLineChart.Line>
67    </EChartsLineChart>
68  );
69}