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

Design Tokens

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

Was this page helpful?

Thank you for your feedback!

What was missing? (optional)

Voting requires cookies or local storage. What we store

Bar