Skip to main content
WireKit
Copy for LLM

Area

Area charts are line charts with the region under the line filled — visually emphasizing the magnitude of the trend. WireKit's type="area" produces a Chart.js line chart with fill: 'origin' set on every dataset; the WireKit theming layer auto-tints the fill at 12% opacity.

When to use area charts

When the cumulative value matters as much as the trend shape — disk usage growth, ARR composition, traffic-volume context. For pure trend tracking use line charts; for proportional comparisons over the same baseline use stacked bar.

Basic Example — Disk usage over 30 days

Server disk usage trend (GB) 
<x-wirekit-chart
    type="area"
    :labels="['Day 1', 'Day 5', 'Day 10', 'Day 15', 'Day 20', 'Day 25', 'Day 30']"
    :datasets="[
        ['label' => 'Used (GB)', 'data' => [120, 156, 178, 203, 245, 267, 290]],
    ]"
    aria-label="Disk usage in GB over 30 days"
/>

Stacked — ARR composition by plan

ARR composition: Starter / Growth / Enterprise (€K) 
<x-wirekit-chart
    type="area"
    :labels="['Q1', 'Q2', 'Q3', 'Q4', 'Q5']"
    :datasets="[
        ['label' => 'Starter (€K)',    'data' => [12, 18, 24, 28, 32]],
        ['label' => 'Growth (€K)',     'data' => [28, 42, 58, 78, 102]],
        ['label' => 'Enterprise (€K)', 'data' => [60, 95, 140, 180, 240]],
    ]"
    :options="['scales' => ['y' => ['stacked' => true]]]"
    aria-label="ARR composition stacked by plan tier"
/>

Real-world recipe — Cumulative signups

@php
    $signups = \App\Models\User::query()
        ->selectRaw('DATE(created_at) as day, COUNT(*) as count')
        ->where('created_at', '>=', now()->subDays(30))
        ->groupBy('day')
        ->orderBy('day')
        ->pluck('count', 'day');

    // Cumulative running total — the area visualizes the lifetime-signup curve.
    $cumulative = [];
    $running = 0;
    foreach ($signups as $count) {
        $running += $count;
        $cumulative[] = $running;
    }
@endphp

<x-wirekit-chart
    type="area"
    :labels="$signups->keys()->all()"
    :datasets="[['label' => 'Cumulative signups', 'data' => $cumulative]]"
    height="280px"
/>

See Also

Design Tokens

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