---
title: Line
description: Smooth, spline, dashed, step, and multi-series synchronized line charts.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/area
  - /components/charts-chartjs/line
---

# 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](./bar.md); for cumulative breakdowns use [area charts](./area.md).

## Basic Example — Daily Active Users with smooth curve

:::preview{title="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

:::preview{title="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

```blade
<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

```blade
@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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Area charts](./area.md) for filled-line variants
- [Streaming](./streaming.md) for live wire:streaming updates
- [Chart.js line demos](../charts-chartjs/line.md) on the alternative adapter

## Design Tokens

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