> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mzizi.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Bar chart

> Bar charts for categorical comparison — vertical, horizontal, grouped, stacked and mineral-coloured.

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

## Vertical bar chart

```tsx theme={null}

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:

```tsx theme={null}
<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:

```tsx theme={null}
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:

```tsx theme={null}
<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-coloured bars

For category-specific colouring using the mineral palette:

```tsx theme={null}
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