Line

ApexCharts renders line charts via SVG with built-in tooltips, hover-states, and smooth-curve interpolation. Compared to Chart.js it ships polished defaults; compared to its own Apex baseline, WireKit's adapter overlays the active CSS-variable theme automatically.

When to use

Continuous trends. For categorical comparisons reach for bar charts; for cumulative breakdowns use area charts.

Basic Example — Daily Active Users with smooth curve

DAU growth over the last 30 days

<x-wirekit-chart
    library="apexcharts"
    type="line"
    :labels="['Day 1', 'Day 5', 'Day 10', 'Day 15', 'Day 20', 'Day 25', 'Day 30']"
    :datasets="[
        ['label' => 'DAU', 'data' => [1240, 1380, 1410, 1525, 1680, 1742, 1820]],
    ]"
    aria-label="Daily active users smoothed line trend"
/>

Multi-series — Latency percentiles

API response time p50 / p95 / p99 (ms) — 24h window

<x-wirekit-chart
    library="apexcharts"
    type="line"
    :labels="['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']"
    :datasets="[
        ['label' => 'p50', 'data' => [45, 42, 78, 92, 88, 67, 51]],
        ['label' => 'p95', 'data' => [120, 115, 220, 280, 240, 180, 140]],
        ['label' => 'p99', 'data' => [340, 320, 580, 720, 620, 460, 380]],
    ]"
    aria-label="API response time percentiles over 24 hours"
/>

Step variant

<x-wirekit-chart
    type="line"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    :datasets="[['label' => 'Pricing tier', 'data' => [9, 9, 19, 19, 19, 49, 49]]]"
    :options="['stroke' => ['curve' => 'stepline', 'width' => 2]]"
/>

stroke.curve = 'stepline' produces a horizontal-then-vertical step. ApexCharts also supports 'straight' (no curve) and 'smooth' (default).

Real-world recipe — Eloquent + multi-tenant DAU

@php
    $tenants = \App\Models\Tenant::query()->whereIn('id', [1, 2, 3])->get();
    $days = collect(range(0, 29))->map(fn ($i) => now()->startOfDay()->subDays(29 - $i));

    $datasets = $tenants->map(fn ($t) => [
        'label' => $t->name,
        'data' => $days->map(fn ($d) => $t->activeUsersOn($d))->all(),
    ])->all();

    $labels = $days->map(fn ($d) => $d->format('M j'))->all();
@endphp

<x-wirekit-chart
    type="line"
    :labels="$labels"
    :datasets="$datasets"
    aria-label="Daily active users across tenants"
/>

License note

ApexCharts is non-MIT — see the License section on the Chart overview page and apexcharts.com/license for the full terms.

Design Tokens

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