{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-examples",
  "title": "Chart Examples",
  "description": "Bar, line, scatter, candlestick, donut, and pie chart examples.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "chart"
  ],
  "files": [
    {
      "path": "src/components/examples/charts.tsx",
      "content": "import {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  Scatter,\n  ScatterChart,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\nconst performanceData = [\n  { month: \"Jan\", revenue: 186, expenses: 82 },\n  { month: \"Feb\", revenue: 305, expenses: 148 },\n  { month: \"Mar\", revenue: 237, expenses: 120 },\n  { month: \"Apr\", revenue: 273, expenses: 154 },\n  { month: \"May\", revenue: 209, expenses: 103 },\n  { month: \"Jun\", revenue: 314, expenses: 165 },\n]\n\nconst performanceConfig = {\n  revenue: { label: \"Revenue\", color: \"var(--chart-1)\" },\n  expenses: { label: \"Expenses\", color: \"var(--chart-3)\" },\n} satisfies ChartConfig\n\nconst channelData = [\n  { channel: \"Organic\", visitors: 420, fill: \"var(--chart-1)\" },\n  { channel: \"Referral\", visitors: 280, fill: \"var(--chart-2)\" },\n  { channel: \"Social\", visitors: 190, fill: \"var(--chart-3)\" },\n  { channel: \"Email\", visitors: 150, fill: \"var(--chart-4)\" },\n]\n\nconst channelConfig = {\n  visitors: { label: \"Visitors\" },\n  organic: { label: \"Organic\", color: \"var(--chart-1)\" },\n  referral: { label: \"Referral\", color: \"var(--chart-2)\" },\n  social: { label: \"Social\", color: \"var(--chart-3)\" },\n  email: { label: \"Email\", color: \"var(--chart-4)\" },\n} satisfies ChartConfig\n\nconst pointData = [\n  { day: 1, score: 38 },\n  { day: 2, score: 52 },\n  { day: 3, score: 44 },\n  { day: 4, score: 68 },\n  { day: 5, score: 61 },\n  { day: 6, score: 79 },\n  { day: 7, score: 74 },\n  { day: 8, score: 91 },\n  { day: 9, score: 83 },\n]\n\nconst pointConfig = {\n  score: { label: \"Focus score\", color: \"var(--chart-5)\" },\n} satisfies ChartConfig\n\nconst candleData = [\n  { day: \"Mon\", range: [92, 108], direction: \"up\" },\n  { day: \"Tue\", range: [101, 95], direction: \"down\" },\n  { day: \"Wed\", range: [98, 116], direction: \"up\" },\n  { day: \"Thu\", range: [118, 111], direction: \"down\" },\n  { day: \"Fri\", range: [110, 123], direction: \"up\" },\n  { day: \"Sat\", range: [121, 128], direction: \"up\" },\n  { day: \"Sun\", range: [126, 119], direction: \"down\" },\n]\n\nconst candleConfig = {\n  range: { label: \"Price\" },\n} satisfies ChartConfig\n\nexport function BarChartExample() {\n  return (\n    <ChartContainer config={performanceConfig} className=\"h-64 w-full max-w-2xl\">\n      <BarChart accessibilityLayer data={performanceData} margin={{ left: 4, right: 4 }}>\n        <CartesianGrid vertical={false} />\n        <XAxis dataKey=\"month\" tickLine={false} tickMargin={10} axisLine={false} />\n        <YAxis tickLine={false} axisLine={false} width={28} />\n        <ChartTooltip content={<ChartTooltipContent indicator=\"dashed\" />} />\n        <Bar dataKey=\"revenue\" fill=\"var(--color-revenue)\" radius={[5, 5, 0, 0]} />\n        <Bar dataKey=\"expenses\" fill=\"var(--color-expenses)\" radius={[5, 5, 0, 0]} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n\nexport function LineChartExample() {\n  return (\n    <ChartContainer config={performanceConfig} className=\"h-64 w-full max-w-2xl\">\n      <LineChart accessibilityLayer data={performanceData} margin={{ left: 4, right: 4 }}>\n        <CartesianGrid vertical={false} />\n        <XAxis dataKey=\"month\" tickLine={false} tickMargin={10} axisLine={false} />\n        <YAxis tickLine={false} axisLine={false} width={28} />\n        <ChartTooltip content={<ChartTooltipContent indicator=\"dashed\" />} />\n        <Line dataKey=\"revenue\" type=\"linear\" stroke=\"var(--color-revenue)\" strokeWidth={2.5} dot={{ r: 4, fill: \"var(--background)\", strokeWidth: 2.5 }} />\n        <Line dataKey=\"expenses\" type=\"linear\" stroke=\"var(--color-expenses)\" strokeWidth={2.5} strokeDasharray=\"5 5\" dot={{ r: 3, fill: \"var(--background)\", strokeWidth: 2 }} />\n      </LineChart>\n    </ChartContainer>\n  )\n}\n\nexport function DotChartExample() {\n  return (\n    <ChartContainer config={pointConfig} className=\"h-64 w-full max-w-2xl\">\n      <ScatterChart accessibilityLayer margin={{ left: 4, right: 12, top: 12, bottom: 4 }}>\n        <CartesianGrid vertical={false} />\n        <XAxis dataKey=\"day\" type=\"number\" name=\"Day\" tickLine={false} axisLine={false} tickMargin={10} />\n        <YAxis dataKey=\"score\" type=\"number\" name=\"Score\" domain={[20, 100]} tickLine={false} axisLine={false} width={28} />\n        <ChartTooltip cursor={{ strokeDasharray: \"4 4\" }} content={<ChartTooltipContent indicator=\"dot\" />} />\n        <Scatter data={pointData} fill=\"var(--color-score)\" />\n      </ScatterChart>\n    </ChartContainer>\n  )\n}\n\nexport function CandlestickChartExample() {\n  return (\n    <ChartContainer config={candleConfig} className=\"h-64 w-full max-w-2xl\">\n      <BarChart accessibilityLayer data={candleData} margin={{ left: 4, right: 4 }}>\n        <CartesianGrid vertical={false} />\n        <XAxis dataKey=\"day\" tickLine={false} axisLine={false} tickMargin={10} />\n        <YAxis domain={[80, 140]} tickLine={false} axisLine={false} width={28} />\n        <ChartTooltip content={<ChartTooltipContent labelFormatter={(label) => `${label} trading`} />} />\n        <Bar dataKey=\"range\" shape={<Candlestick />} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n\nfunction Candlestick({ height, payload, width, x, y }: any) {\n  const isUp = payload.direction === \"up\"\n  const color = isUp ? \"var(--chart-2)\" : \"var(--chart-5)\"\n  const bodyHeight = Math.max(height, 4)\n  const center = x + width / 2\n\n  return (\n    <g>\n      <line x1={center} x2={center} y1={y - 10} y2={y + bodyHeight + 10} stroke={color} strokeWidth={1.5} />\n      <rect x={x + 3} y={y} width={Math.max(width - 6, 3)} height={bodyHeight} rx={2} fill={color} />\n    </g>\n  )\n}\n\nexport function DonutChartExample() {\n  return (\n    <ChartContainer config={channelConfig} className=\"h-64 w-full max-w-md\">\n      <PieChart>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"channel\" hideLabel />} />\n        <Pie\n          data={channelData}\n          dataKey=\"visitors\"\n          nameKey=\"channel\"\n          innerRadius={58}\n          outerRadius={94}\n          paddingAngle={3}\n          cornerRadius={5}\n        />\n      </PieChart>\n    </ChartContainer>\n  )\n}\n\nexport function PieChartExample() {\n  return (\n    <ChartContainer config={channelConfig} className=\"h-64 w-full max-w-md\">\n      <PieChart>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"channel\" hideLabel />} />\n        <Pie data={channelData} dataKey=\"visitors\" nameKey=\"channel\" outerRadius={98} paddingAngle={2} cornerRadius={3} />\n      </PieChart>\n    </ChartContainer>\n  )\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}