ILineChart ​

A line over ordered categories, in plain SVG with no charting dependency. Hovering anywhere in the plot drops a crosshair on the nearest category and marks the point.

<script setup lang="ts">
const monthly = [
  { label: 'Jan', value: 18200 },
  { label: 'Feb', value: 22400 },
  { label: 'Mar', value: 19800 },
]
</script>

<template>
  <ILineChart
    :data="monthly"
    :format="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
    label="Revenue by month"
  />
</template>

The width fills the container and height (240px by default) is the only dimension you set. locale and format feed one Intl.NumberFormat, used for the ticks and the tooltip alike.

The examples below pass currency as format:

const currency = { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }

Area ​

area adds a wash beneath the line. It is ignored for multiple series.

<ILineChart :data="monthly" variant="area" :format="currency" label="Revenue by month" />

Several series ​

<script setup lang="ts">
const byRegion = [
  { label: 'Jan', north: 8200, south: 5400, east: 3100 },
  { label: 'Feb', north: 9600, south: 6100, east: 3800 },
]

const regions = [
  { key: 'north', name: 'North' },
  { key: 'south', name: 'South' },
  { key: 'east', name: 'East' },
]
</script>

<template>
  <ILineChart
    :data="byRegion"
    :series="regions"
    :format="currency"
    label="Revenue by month and region"
  />
</template>

A legend appears automatically from two series up; legend is honoured only for a single series. When series come and go, give each one a slot so its colour stays with the entity.

Where the axis starts ​

Zero is off by default, unlike IBarChart: the axis is fitted to the data so the shape of the line stays readable.

<ILineChart :data="balance" :format="currency" label="Daily balance, axis fitted to the data" />
<ILineChart :data="balance" zero :format="currency" label="Daily balance, axis from zero" />

Turn zero on when the question is about magnitude rather than movement: the first chart above draws a 2% wobble across the full height of the plot.

Gaps ​

null is a missing reading, and the line breaks rather than bridging it.

<ILineChart
  :data="[{ label: 'Mar', value: null }, …]"
  :format="currency"
  label="Revenue by month, with two months missing"
/>

Bare ​

<ILineChart
  :data="monthly"
  :axis="false"
  :height="120"
  variant="area"
  label="Revenue by month"
/>

For something smaller still — a trend inside a table cell or a stat tile, with no axis, tooltip or crosshair at all — use ISparkline.

Props ​

Slots ​

Data shapes ​

interface LineChartDatum {
  label: string
  value?: number | null
  [key: string]: unknown
}

interface ChartSeries {
  key: string
  name?: string
  slot?: number
}

The line is hidden from assistive technology and the data is exposed as a table instead, so a screen reader gets the numbers rather than a shape. label names that table.