Bar chart

const data = [
  { category: "Farming", count: 420 },
  { category: "Mining", count: 380 },
  { category: "Travel", count: 290 },
  { category: "Tourism", count: 510 },
  { category: "Sports", count: 340 },
]

const chartConfig = {
  count: { label: "Events", color: "var(--chart-2)" },
}

<ChartContainer config={chartConfig} className="h-[300px]">
  <BarChart data={data}>
    <CartesianGrid strokeDasharray="3 3" className="stroke-border" vertical={false} />
    <XAxis dataKey="category" className="text-xs fill-muted-foreground" />
    <YAxis className="text-xs fill-muted-foreground" />
    <Bar dataKey="count" fill="var(--chart-2)" radius={[4, 4, 0, 0]} />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

<BarChart data={data} layout="vertical">
  <XAxis type="number" className="text-xs fill-muted-foreground" />
  <YAxis dataKey="category" type="category" width={80} className="text-xs fill-muted-foreground" />
  <Bar dataKey="count" fill="var(--chart-2)" radius={[0, 4, 4, 0]} />
</BarChart>

const chartConfig = {
  thisYear: { label: "2026", color: "var(--chart-1)" },
  lastYear: { label: "2025", color: "var(--chart-3)" },
}

<BarChart data={data}>
  <Bar dataKey="thisYear" fill="var(--chart-1)" radius={[4, 4, 0, 0]} />
  <Bar dataKey="lastYear" fill="var(--chart-3)" radius={[4, 4, 0, 0]} />
  <ChartLegend content={<ChartLegendContent />} />
</BarChart>

<BarChart data={data}>
  <Bar dataKey="mobile" stackId="stack" fill="var(--chart-1)" />
  <Bar dataKey="desktop" stackId="stack" fill="var(--chart-2)" radius={[4, 4, 0, 0]} />
</BarChart>

const CATEGORY_COLORS = {
  Farming: "var(--color-malachite)",
  Mining: "var(--color-terracotta)",
  Travel: "var(--color-cobalt)",
  Tourism: "var(--color-tanzanite)",
  Sports: "var(--color-gold)",
}

<Bar dataKey="count">
  {data.map((entry) => (
    <Cell key={entry.category} fill={CATEGORY_COLORS[entry.category]} />
  ))}
</Bar>