ex-animated-dashed-stroke-echarts-composed-chart

1"use client";
2 
3import { EChartsComposedChart, type ChartConfig } from "@/registry/charts/echarts-composed-chart";
4 
5const data = [
6  { month: "January", revenue: 4200, profit: 1800 },
7  { month: "February", revenue: 5800, profit: 2400 },
8  { month: "March", revenue: 4100, profit: 1600 },
9  { month: "April", revenue: 6200, profit: 2800 },
10  { month: "May", revenue: 5400, profit: 2200 },
11  { month: "June", revenue: 7800, profit: 3400 },
12  { month: "July", revenue: 6100, profit: 2600 },
13  { month: "August", revenue: 8200, profit: 3800 },
14  { month: "September", revenue: 5900, profit: 2500 },
15  { month: "October", revenue: 6800, profit: 3000 },
16  { month: "November", revenue: 7200, profit: 3200 },
17  { month: "December", revenue: 9100, profit: 4200 },
18];
19 
20const chartConfig = {
21  revenue: {
22    label: "Revenue",
23    colors: {
24      light: ["#3b82f6"],
25      dark: ["#6A5ACD"],
26    },
27  },
28  profit: {
29    label: "Profit",
30    colors: {
31      light: ["#10b981"],
32      dark: ["#34d399"],
33    },
34  },
35} satisfies ChartConfig;
36 
37export function EChartsExampleComposedChart() {
38  return (
39    <EChartsComposedChart
40      className="h-full w-full p-4"
41      xDataKey="month"
42      data={data}
43      config={chartConfig}
44    >
45      <EChartsComposedChart.Grid />
46      <EChartsComposedChart.XAxis dataKey="month" tickFormatter={(value) => value.substring(0, 3)} />
47      <EChartsComposedChart.Legend isClickable />
48      <EChartsComposedChart.Tooltip />
49      <EChartsComposedChart.Bar dataKey="revenue" isClickable />
50      <EChartsComposedChart.Line
51        dataKey="profit"
52        strokeVariant="animated-dashed" // [!code highlight]
53        isClickable
54      />
55    </EChartsComposedChart>
56  );
57}