Skip to main content
WireKit
Copy for LLM

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

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

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

<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

@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

Design Tokens

See Chart.js adapter — Design Tokens for the color, typography, and grid tokens shared across every Chart.js demo.