---
title: Bar
description: Simple, grouped, stacked, and horizontal bar variations with realistic SaaS revenue and headcount data.
visibility: guest
draft: false
related:
  - /components/charts-chartjs
  - /components/charts-chartjs/line
  - /components/charts-apex/bar
  - /components/chart
---

# Bar

Bar charts are the workhorse of dashboard reporting — quarterly revenue, headcount changes, error-budget burn, conversion-rate cohorts. Chart.js renders them via canvas with WireKit's automatic theming and dark-mode reactivity.

## When to use bar charts

Reach for `type="bar"` when comparing discrete categories side-by-side. Use grouped bars for multi-metric comparisons over the same x-axis (Q1 / Q2 / Q3 / Q4 — Revenue / Costs / Margin). Use stacked bars when the parts sum to a meaningful whole (active users by plan tier).

For continuous trends use `type="line"`; for proportional breakdowns use `type="pie"` or `type="doughnut"`.

## Basic Example — Quarterly MRR

:::preview{title="Quarterly MRR for a B2B SaaS (€K)"}
<x-wirekit-chart
    type="bar"
    :labels="['Q1 2024', 'Q2 2024', 'Q3 2024', 'Q4 2024', 'Q1 2025', 'Q2 2025']"
    :datasets="[
        ['label' => 'MRR (€K)', 'data' => [42, 58, 71, 89, 104, 121]],
    ]"
    aria-label="Monthly recurring revenue by quarter"
/>
:::

## Grouped — MRR vs Costs vs Net Margin

:::preview{title="Revenue / Costs / Net Margin per quarter"}
<x-wirekit-chart
    type="bar"
    :labels="['Q1 2024', 'Q2 2024', 'Q3 2024', 'Q4 2024', 'Q1 2025']"
    :datasets="[
        ['label' => 'MRR',    'data' => [42, 58, 71, 89, 104]],
        ['label' => 'Costs',  'data' => [38, 47, 54, 67, 78]],
        ['label' => 'Margin', 'data' => [4, 11, 17, 22, 26]],
    ]"
    aria-label="Quarterly revenue, costs, and net margin"
/>
:::

## Stacked — Headcount by Department

```blade
<x-wirekit-chart
    type="bar"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        ['label' => 'Engineering', 'data' => [12, 14, 16, 18, 21, 23], 'stack' => 'team'],
        ['label' => 'Product',     'data' => [3, 4, 4, 5, 6, 7],       'stack' => 'team'],
        ['label' => 'Sales',       'data' => [4, 5, 7, 8, 9, 11],      'stack' => 'team'],
        ['label' => 'Ops',         'data' => [2, 2, 3, 3, 3, 4],       'stack' => 'team'],
    ]"
    :options="['scales' => ['x' => ['stacked' => true], 'y' => ['stacked' => true]]"
/>
```

The `stack` field on every dataset ties them into one stack bucket; the `scales.{x,y}.stacked` option toggles Chart.js's stacked-bar layout. WireKit's deep-merge passes the option through unchanged.

## Real-world recipe — Eloquent + Bar chart

```blade
@php
    $months = collect(range(0, 11))
        ->map(fn ($i) => now()->startOfMonth()->subMonths(11 - $i));
    $orders = \App\Models\Order::query()
        ->whereBetween('placed_at', [$months->first(), now()])
        ->selectRaw('DATE_FORMAT(placed_at, "%Y-%m") as month, SUM(total_eur) as total')
        ->groupBy('month')
        ->pluck('total', 'month');

    $labels = $months->map(fn ($m) => $m->format('M Y'))->all();
    $data = $months->map(fn ($m) => (int) ($orders[$m->format('Y-m')] ?? 0))->all();
@endphp

<x-wirekit-chart
    type="bar"
    :labels="$labels"
    :datasets="[['label' => 'Monthly revenue (€)', 'data' => $data]]"
    height="320px"
    aria-label="Monthly revenue over the last 12 months"
/>
```

This pattern — group by a date format, pluck into [bucket → total] — works for every period (`%Y-%m-%d` for daily, `%Y-W%v` for weekly, `%Y` for yearly).

## See Also

- [Line charts](./line.md) for continuous trends instead of categorical comparisons
- [Stacked area charts](./area.md) when the categories sum to a meaningful whole AND you want a smoother shape
- [ApexCharts bar demos](../charts-apex/bar.md) for the same charts on the alternative adapter

## Design Tokens

See [Chart.js adapter — Design Tokens](/components/charts-chartjs#design-tokens) for the color, typography, and grid tokens shared across every Chart.js demo.