{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ex-svg-renderer-echarts-area-chart",
  "registryDependencies": [
    "@evilcharts/echarts-area-chart"
  ],
  "files": [
    {
      "path": "src/registry/examples/echarts/ex-svg-renderer-echarts-area-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsAreaChart, type ChartConfig } from \"@/registry/charts/echarts-area-chart\";\n\nconst data = [\n  { month: \"January\", visitors: 342 },\n  { month: \"February\", visitors: 876 },\n  { month: \"March\", visitors: 512 },\n  { month: \"April\", visitors: 629 },\n  { month: \"May\", visitors: 458 },\n  { month: \"June\", visitors: 781 },\n];\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    colors: {\n      light: [\"#047857\"],\n      dark: [\"#10b981\"],\n    },\n  },\n} satisfies ChartConfig;\n\nexport function EChartsSvgRendererAreaChart() {\n  return (\n    <EChartsAreaChart\n      renderer=\"svg\" // [!code highlight]\n      data={data}\n      config={chartConfig}\n      className=\"h-full w-full p-4\"\n      xDataKey=\"month\"\n    >\n      <EChartsAreaChart.Grid />\n      <EChartsAreaChart.XAxis dataKey=\"month\" tickFormatter={(value) => value.substring(0, 3)} />\n      <EChartsAreaChart.Tooltip />\n      <EChartsAreaChart.Area dataKey=\"visitors\" variant=\"gradient\">\n        <EChartsAreaChart.ActiveDot variant=\"colored-border\" />\n      </EChartsAreaChart.Area>\n      <EChartsAreaChart.Brush />\n    </EChartsAreaChart>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}