---
title: Area
description: Filled, stacked, range-area, and spline-with-gradient variants.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/line
  - /components/charts-chartjs/area
---

# Area

ApexCharts renders area charts as SVG paths with optional gradient fills. The adapter sets the dataset color from the active WireKit palette; the gradient fill is auto-derived from that color at 30%/0% opacity stops.

## When to use

When the cumulative magnitude matters as much as the trend shape. For pure trend visualization reach for [line charts](./line.md); for proportional comparisons use [stacked bar](./bar.md).

## Basic Example — Disk-usage growth

:::preview{title="Server disk usage trend (GB)"}
<x-wirekit-chart
    library="apexcharts"
    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 over 30 days"
/>
:::

## Stacked — ARR composition

:::preview{title="ARR composition: Starter / Growth / Enterprise (€K)"}
<x-wirekit-chart
    library="apexcharts"
    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="['chart' => ['stacked' => true]]"
    aria-label="ARR composition stacked by plan tier"
/>
:::

## Range-area — Confidence interval

For "best case / worst case" envelopes ApexCharts exposes `type="range-area"` which renders TWO series stacked: an upper bound and a lower bound. Plot the median in a separate line series above for the canonical "fan chart" shape.

```blade
<x-wirekit-chart
    type="range-area"
    :labels="['Q1', 'Q2', 'Q3', 'Q4']"
    :datasets="[[
        'label' => 'Forecast envelope',
        'data' => [
            ['x' => 'Q1', 'y' => [40, 60]],
            ['x' => 'Q2', 'y' => [55, 80]],
            ['x' => 'Q3', 'y' => [70, 105]],
            ['x' => 'Q4', 'y' => [85, 130]],
        ],
    ]]"
    height="320px"
/>
```

## License note

ApexCharts is non-MIT — see [the License section on the Chart overview page](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Line charts](./line.md) without the fill
- [Stacked bar charts](./bar.md) for proportional categorical comparisons

## Design Tokens

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