---
title: Line
description: Smooth, stepped, dashed, and multi-series line charts with realistic devops and product-analytics data.
visibility: guest
draft: false
related:
  - /components/charts-chartjs
  - /components/charts-chartjs/area
  - /components/charts-chartjs/bar
  - /components/charts-apex/line
---

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

## Basic Example — Daily Active Users

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

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

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

```blade
@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](./advanced.md#wire-streaming) for the full pattern.

## See Also

- [Area charts](./area.md) for filled-line variants
- [Bar charts](./bar.md) for categorical comparisons
- [ApexCharts line demos](../charts-apex/line.md) for the same charts on the alternative adapter

## Design Tokens

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