Chart

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  type ChartConfig,
} from "@/components/ui/chart"
import { Bar, BarChart, XAxis, YAxis } from "recharts"

const chartConfig = {
  views: { label: "Page Views", color: "hsl(var(--primary))" },
  visitors: { label: "Unique Visitors", color: "hsl(var(--muted-foreground))" },
} satisfies ChartConfig

const data = [
  { month: "Jan", views: 186, visitors: 80 },
  { month: "Feb", views: 305, visitors: 200 },
  { month: "Mar", views: 237, visitors: 120 },
]

function ChartDemo() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
      <BarChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <ChartTooltip content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Bar dataKey="views" fill="var(--color-views)" radius={4} />
        <Bar dataKey="visitors" fill="var(--color-visitors)" radius={4} />
      </BarChart>
    </ChartContainer>
  )
}

npx shadcn add @bonsai/chart