Chart 1 of 15

Line and area chart

Use it to show how one measure moves over time and to spot the odd month. Cap the axis when one outlier would flatten everything else; the ▲ label still tells the truth.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

Focus the chart with Tab, then use ← → Home End to move between columns; Esc closes the tooltip. On a phone, touch a column.

How to use it

JavaScript
const chart = lineChart({
  xs: months,                              // ['2025-04', '2025-05', ...]
  xlabel: (m, i, isTooltip) => monthName(m),
  series: [
    { name: 'Spend', values: spend, colour: 'var(--c1)', area: true },
    { name: 'Same month last year', values: lastYear,
      colour: 'var(--muted)', dash: '2 4', width: 1.5, faint: true }
  ],
  cap: 3600,                               // clip the axis, label the outlier with a ▲
  threshold: { value: 2310, label: 'typical month £2.3k' },
  yfmt: v => compact(v),                   // axis labels
  label: 'Monthly spend',                  // aria-label
  empty: 'No spending in this range'
});
document.querySelector('#host').append(chart);

Options

xs
Array of x values (strings). Any length, including 0 or 1.
series
[{ name, values, colour, area, dash, width, faint, points }]. A null value leaves a gap.
cap
Clip the y-axis here. Values above it are drawn at the top with a ▲ and their real value.
threshold
{ value, label }: a dashed reference line, e.g. the typical month.
xlabel
(x, i, isTooltip) => string. Short label for the axis, long label for the tooltip.
yfmt / tipfmt
Number formatters for the axis and the tooltip.
yMin, height, maxLabels
Axis floor, pixel-ish height, and how many x labels to show at most.
label / empty
aria-label for screen readers; text shown when there is no data.