{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-story",
  "title": "Chart Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating chart component usage and variants",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "chart"
  ],
  "files": [
    {
      "path": "registry/ui/chart-story/chart-base.stories.tsx",
      "content": "import { useMemo } from \"react\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  XAxis,\n} from \"recharts\";\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/chart\";\n\nconst multiSeriesData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nconst multiSeriesConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig;\n\nconst singleSeriesData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n];\n\nconst singleSeriesConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig;\n\n/**\n * Beautiful charts. Built using Recharts. Copy and paste into your apps.\n */\nconst meta = {\n  title: \"ui/base/Chart\",\n  component: ChartContainer,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  args: {\n    children: <div />,\n  },\n} satisfies Meta<typeof ChartContainer>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * Combine multiple Area components to create a stacked area chart.\n */\nexport const StackedAreaChart: Story = {\n  args: {\n    config: multiSeriesConfig,\n  },\n  render: (args) => (\n    <ChartContainer {...args}>\n      <AreaChart\n        accessibilityLayer\n        data={multiSeriesData}\n        margin={{\n          left: 12,\n          right: 12,\n        }}\n      >\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip\n          cursor={false}\n          content={<ChartTooltipContent indicator=\"dot\" />}\n        />\n        <Area\n          dataKey=\"mobile\"\n          type=\"natural\"\n          fill=\"var(--color-mobile)\"\n          fillOpacity={0.4}\n          stroke=\"var(--color-mobile)\"\n          stackId=\"a\"\n        />\n        <Area\n          dataKey=\"desktop\"\n          type=\"natural\"\n          fill=\"var(--color-desktop)\"\n          fillOpacity={0.4}\n          stroke=\"var(--color-desktop)\"\n          stackId=\"a\"\n        />\n      </AreaChart>\n    </ChartContainer>\n  ),\n};\n\n/**\n * Combine multiple Bar components to create a stacked bar chart.\n */\nexport const StackedBarChart: Story = {\n  args: {\n    config: multiSeriesConfig,\n  },\n  render: (args) => (\n    <ChartContainer {...args}>\n      <BarChart accessibilityLayer data={multiSeriesData}>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          tickMargin={10}\n          axisLine={false}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip\n          cursor={false}\n          content={<ChartTooltipContent indicator=\"dashed\" />}\n        />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  ),\n};\n\n/**\n * Combine multiple Line components to create a single line chart.\n */\nexport const MultiLineChart: Story = {\n  args: {\n    config: multiSeriesConfig,\n  },\n  render: (args) => (\n    <ChartContainer {...args}>\n      <LineChart\n        accessibilityLayer\n        data={multiSeriesData}\n        margin={{\n          left: 12,\n          right: 12,\n        }}\n      >\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"month\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          tickFormatter={(value) => value.slice(0, 3)}\n        />\n        <ChartTooltip\n          cursor={false}\n          content={<ChartTooltipContent hideLabel />}\n        />\n        <Line\n          dataKey=\"desktop\"\n          type=\"natural\"\n          stroke=\"var(--color-desktop)\"\n          strokeWidth={2}\n          dot={false}\n        />\n        <Line\n          dataKey=\"mobile\"\n          type=\"natural\"\n          stroke=\"var(--color-mobile)\"\n          strokeWidth={2}\n          dot={false}\n        />\n      </LineChart>\n    </ChartContainer>\n  ),\n};\n\n/**\n * Combine Pie and Label components to create a doughnut chart.\n */\nexport const DoughnutChart: Story = {\n  args: {\n    config: singleSeriesConfig,\n  },\n  render: (args) => {\n    const totalVisitors = useMemo(() => {\n      return singleSeriesData.reduce((acc, curr) => acc + curr.visitors, 0);\n    }, []);\n    return (\n      <ChartContainer {...args}>\n        <PieChart>\n          <ChartTooltip\n            cursor={false}\n            content={<ChartTooltipContent hideLabel />}\n          />\n          <Pie\n            data={singleSeriesData}\n            dataKey=\"visitors\"\n            nameKey=\"browser\"\n            innerRadius={48}\n            strokeWidth={5}\n          >\n            <Label\n              content={({ viewBox }) => {\n                if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                  return (\n                    <text\n                      x={viewBox.cx}\n                      y={viewBox.cy}\n                      textAnchor=\"middle\"\n                      dominantBaseline=\"middle\"\n                    >\n                      <tspan\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        className=\"fill-foreground text-3xl font-bold\"\n                      >\n                        {totalVisitors.toLocaleString()}\n                      </tspan>\n                      <tspan\n                        x={viewBox.cx}\n                        y={(viewBox.cy || 0) + 24}\n                        className=\"fill-muted-foreground\"\n                      >\n                        Visitors\n                      </tspan>\n                    </text>\n                  );\n                }\n              }}\n            />\n          </Pie>\n        </PieChart>\n      </ChartContainer>\n    );\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "chart",
    "data-visualization"
  ],
  "type": "registry:component"
}