Skip to main content
WireKit
Copy for LLM

Line

Line charts visualize continuous trends — DAU growth, latency p50/p95/p99, error rates, retention curves. Chart.js renders them with smooth curves by default; per-dataset overrides toggle stepped, dashed, or angular variants.

When to use line charts

Continuous data over time. For categorical comparisons reach for bar charts; for cumulative breakdowns reach for stacked area.

Basic Example — Daily Active Users

DAU over the last 30 days 
<x-wirekit-chart
    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 trend"
/>

Multi-series — Latency percentiles

API response time p50 / p95 / p99 (ms) 
<x-wirekit-chart
    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"
/>

Stepped — Error budget consumed

<x-wirekit-chart
    type="line"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    :datasets="[
        [
            'label' => 'Error budget burn (%)',
            'data' => [0, 0, 12, 12, 47, 47, 47],
            'stepped' => true,
            'fill' => false,
        ],
    ]"
    height="280px"
/>

stepped: true turns each segment into a horizontal-then-vertical step — the right shape for incident-driven jumps where the value stays flat between events.

Real-world recipe — Stream live metric updates

@php
    $cpu = \App\Metrics\Cpu::recent(60)->pluck('percent')->all();  // last 60 samples
    $labels = array_map(fn ($i) => "{$i}m ago", array_reverse(range(0, count($cpu) - 1)));
@endphp

<x-wirekit-chart
    type="line"
    :labels="$labels"
    :datasets="[['label' => 'CPU usage (%)', 'data' => $cpu]]"
    wireStream="cpu.sample"
    wireStreamMode="strict"
    :wireStreamCap="60"
    height="240px"
/>

{{-- In a Livewire component:
$this->dispatch('cpu.sample', point: 67.4);
--}}

The wireStream prop subscribes the chart to a Livewire-emitted event. Each fired event appends a new data point and (under strict mode, the default) trims the oldest one — keeping the visible window constant at wireStreamCap points. See Advanced charts for the full pattern.

See Also

Design Tokens

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