Bar Chart

Bar charts compare categorical data using rectangular bars. Use vertical bars for categories and horizontal bars when category labels are long.

Vertical bar chart


import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from "recharts"
 
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>

Horizontal bar chart

Use when category labels are long or there are many categories:


<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>

Grouped bar chart

Compare multiple metrics per category:


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>

Stacked bar chart

Show composition within categories:


<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>

Apply radius only to the top bar in the stack.

Mineral-colored bars

For category-specific coloring using the mineral palette:


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>

Styling guidelines

Use radius={[4, 4, 0, 0]} for rounded top corners on vertical bars
Use radius={[0, 4, 4, 0]} for rounded right corners on horizontal bars
Set vertical={false} on CartesianGrid for cleaner visuals
Use barSize={32} or similar to control bar width when bars are too wide or narrow
Include ChartLegend when showing multiple data series