---
title: Area
description: Filled, stacked, and range-filled area charts with realistic e-commerce and devops data.
visibility: guest
draft: false
related:
  - /components/charts-chartjs
  - /components/charts-chartjs/line
  - /components/charts-apex/area
---

# 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](./line.md); for proportional comparisons over the same baseline use [stacked bar](./bar.md).

## Basic Example — Disk usage over 30 days

:::preview{title="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

:::preview{title="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

```blade
@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

- [Line charts](./line.md) for the same data without the fill
- [ApexCharts area demos](../charts-apex/area.md) — note ApexCharts has dedicated `range-area` for envelope visualizations

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