Area

ApexCharts renders area charts as SVG paths with optional gradient fills. The adapter sets the dataset color from the active WireKit palette and the stroke curve to smooth; it configures no fill of its own, so the fill is whatever ApexCharts derives from the series color. Pass your own fill option when you want a gradient — nothing in WireKit will overwrite it.

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

<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

<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

• Line charts without the fill
• Stacked bar charts for proportional categorical comparisons

Design Tokens

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