Skip to main content
WireKit
Copy for LLM

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; for proportional comparisons use stacked bar.

Basic Example — Disk-usage growth

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

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.

<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 and apexcharts.com/license for the full terms.

See Also

Design Tokens

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