{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ex-brush-area-chart",
  "registryDependencies": [
    "@evilcharts/recharts-area-chart"
  ],
  "files": [
    {
      "path": "src/registry/examples/recharts/ex-brush-area-chart.tsx",
      "content": "\"use client\";\n\nimport { EvilAreaChart } from \"@/registry/charts/recharts-area-chart\";\nimport { type ChartConfig } from \"@/registry/ui/recharts-chart\";\n\nconst data = [\n  { date: \"June 1\", desktop: 412, mobile: 268 },\n  { date: \"June 2\", desktop: 468, mobile: 301 },\n  { date: \"June 3\", desktop: 501, mobile: 334 },\n  { date: \"June 4\", desktop: 486, mobile: 312 },\n  { date: \"June 5\", desktop: 523, mobile: 349 },\n  { date: \"June 6\", desktop: 297, mobile: 198 },\n  { date: \"June 7\", desktop: 264, mobile: 173 },\n  { date: \"June 8\", desktop: 534, mobile: 356 },\n  { date: \"June 9\", desktop: 578, mobile: 384 },\n  { date: \"June 10\", desktop: 612, mobile: 402 },\n  { date: \"June 11\", desktop: 596, mobile: 391 },\n  { date: \"June 12\", desktop: 641, mobile: 428 },\n  { date: \"June 13\", desktop: 351, mobile: 236 },\n  { date: \"June 14\", desktop: 318, mobile: 211 },\n  { date: \"June 15\", desktop: 663, mobile: 441 },\n  { date: \"June 16\", desktop: 702, mobile: 467 },\n  { date: \"June 17\", desktop: 688, mobile: 452 },\n  { date: \"June 18\", desktop: 731, mobile: 489 },\n  { date: \"June 19\", desktop: 754, mobile: 503 },\n  { date: \"June 20\", desktop: 402, mobile: 271 },\n  { date: \"June 21\", desktop: 376, mobile: 249 },\n  { date: \"June 22\", desktop: 769, mobile: 512 },\n  { date: \"June 23\", desktop: 812, mobile: 538 },\n  { date: \"June 24\", desktop: 798, mobile: 524 },\n  { date: \"June 25\", desktop: 843, mobile: 561 },\n  { date: \"June 26\", desktop: 867, mobile: 579 },\n  { date: \"June 27\", desktop: 451, mobile: 302 },\n  { date: \"June 28\", desktop: 428, mobile: 287 },\n  { date: \"June 29\", desktop: 881, mobile: 594 },\n  { date: \"June 30\", desktop: 926, mobile: 618 },\n];\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    colors: {\n      light: [\"#047857\"],\n      dark: [\"#10b981\"],\n    },\n  },\n  mobile: {\n    label: \"Mobile\",\n    colors: {\n      light: [\"#be123c\"],\n      dark: [\"#f43f5e\"],\n    },\n  },\n} satisfies ChartConfig;\n\nexport function EvilExampleBrushAreaChart() {\n  return (\n    <EvilAreaChart\n      data={data}\n      config={chartConfig}\n      className=\"h-full w-full p-4\"\n      curveType=\"monotone\"\n      xDataKey=\"date\"\n    >\n      <EvilAreaChart.Grid />\n      <EvilAreaChart.XAxis dataKey=\"date\" tickFormatter={(value) => value.split(\" \")[1]} />\n      <EvilAreaChart.Brush\n        height={56} // [!code highlight]\n        formatLabel={(value) => String(value)} // [!code highlight]\n      />\n      <EvilAreaChart.Legend isClickable />\n      <EvilAreaChart.Tooltip />\n      <EvilAreaChart.Area dataKey=\"desktop\" variant=\"gradient\" isClickable />\n      <EvilAreaChart.Area dataKey=\"mobile\" variant=\"gradient\" isClickable />\n    </EvilAreaChart>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}