Skip to main content
WireKit
Copy for LLM

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.

See Also

Design Tokens

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

Was this page helpful?

Thank you for your feedback!

Voting requires cookies or local storage. What we store