# Line chart

Follow changes over time without a filled area.

## Install

~~~~sh
pnpm dlx @mielui/svelte add chart
~~~~

## Usage

Use a Line for each numeric series. Sort dates before passing data; lines connect points in the supplied order.

String categories have equal spacing. Date and numeric categories preserve their distance. A null or missing measurement breaks the line instead of turning into zero.

Use the [Chart API reference](/docs/components/chart.md) for all exported parts and their props.

## Examples

### Compare trends

Two lines share one numeric scale and a labelled legend.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Monthly revenue and target" class="w-full">
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Line key="revenue" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Missing measurements

Wednesday has no reading. The gap stays visible so the chart does not imply a measurement.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { day: 'Mon', latency: 42 },
        { day: 'Tue', latency: 58 },
        { day: 'Wed', latency: null },
        { day: 'Thu', latency: 47 },
        { day: 'Fri', latency: 39 },
        { day: 'Sat', latency: 45 }
    ];
    const config = {
        latency: {
            label: 'Latency',
            color: 'var(--chart-1)',
            format: (value: number) => `${value} ms`
        }
    };
</script>

<Chart.Root
    {data}
    {config}
    x="day"
    aria-label="Response latency with a missing Wednesday measurement"
    class="w-full"
>
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Line key="latency" />
    </Chart.Plot>
    <Chart.Tooltip />
    <Chart.Legend />
</Chart.Root>
~~~~

### Irregular dates

April 3 and April 10 are seven days apart. Their spacing is wider than samples taken two days apart.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { date: new Date('2026-04-01T00:00:00Z'), visitors: 120 },
        { date: new Date('2026-04-03T00:00:00Z'), visitors: 180 },
        { date: new Date('2026-04-10T00:00:00Z'), visitors: 150 },
        { date: new Date('2026-04-12T00:00:00Z'), visitors: 230 }
    ];
    const config = { visitors: { label: 'Visitors', color: 'var(--chart-2)' } };
</script>

<Chart.Root
    {data}
    {config}
    x="date"
    aria-label="Visitors sampled at irregular dates"
    class="w-full"
>
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Line key="visitors" />
    </Chart.Plot>
    <Chart.Tooltip />
    <Chart.Legend />
</Chart.Root>
~~~~

### Continuous motion

A traveling highlight follows each line without changing its path or values.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root
    {data}
    {config}
    x="month"
    aria-label="Monthly revenue and target"
    class="w-full"
    animation="live"
>
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Line key="revenue" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

For the rendered guide, visit [Line chart](/docs/components/chart/line).