Line chart

A continuous series over time — the third renderer beside area and bar, and the one used for comparisons.

In the libraryWildLineChart.vue

Try it

Hover the plot, or tab to it and use the arrow keys, to read each day.

Block 3Block 7Block 12Last 13 days

Compare

End labels

Dots

Smooth

Grid

<WLineChart
  series={[
    { name: 'Block 3', data: block3 },
    { name: 'Block 7', data: block7 },
    { name: 'Block 12', data: block12 },
  ]}
  labels={days}
  height={260}
  unit="%"
  endLabels
  ariaLabel="Soil moisture at blocks 3, 7 and 12, 17 to 29 September"
/>

When to use

Use a line chart to compare two to five series on one scale, such as soil moisture at three blocks.
Use it over an area chart when lines cross, because stacked fills muddy the lines beneath them.
Use a reference line for the same days last year. It’s thin and grey, because dashes mean thresholds.

Don’t use it

Never two y-axes: use stacked panels.
For one level over time. Use the area chart in Charts.
For an amount per period, such as daily rainfall. Use the bar chart in Charts.
For more than five series. Split them across charts, or use a Table.

Anatomy

Y-axis labels, gridlines, a 2px line per series, x-axis labels, and each series’ latest value in the right gutter. Dots drop out where readings crowd closer than 12px.

Block 3Block 7Last 13 days

A threshold is the only dashed mark. Its label sits in the gutter, clear of the lines.

Variants

Series take the chart ramp in order, and a reference series is grey.

Block 3Block 7Block 12Last 13 days

comparison

This yearLast yearLast 13 days

against a reference

Block 3Block 7Block 12Last 13 days

straight, no dots

const sites = [
  { name: 'Block 3', data: block3 },
  { name: 'Block 7', data: block7 },
  { name: 'Block 12', data: block12 },
];

<WLineChart series={sites} labels={days} height={200} unit="%" />

<WLineChart
  series={[
    { name: 'This year', data: block3 },
    { name: 'Last year', data: lastYear, dashed: true },
  ]}
  labels={days}
  height={200}
  unit="%"
/>

<WLineChart series={sites} labels={days} height={200} unit="%" smooth={false} showDots={false} />

A reference series is a thinner grey line with hollow dots and a hollow key, so it reads as the reference without its colour.

Content

Name each series by what differs between them: Block 3, Block 7, Last year.
Put the unit in unit, so names stay short.
Keep x-axis labels short: 17 Sep, Mon, 6am.
Name the series in a Legend above the plot.

Accessibility

Give every chart an ariaLabel that says what it compares and over what period. The plot is one tab stop, and a screen reader hears each reading as the arrow keys move.

Key	What it does
Tab	Moves focus to the plot.
→ / ↑	Moves to the next reading, or the first.
← / ↓	Moves to the previous reading, or the last.
Home / End	Moves to the first or last reading.
Escape	Hides the readout.

Props

Prop	Type	Default	Description
series	{ name, data, times?, color?, dashed? }[]	—	Several series on one scale. null is no reading.
data	{ label, value: number \| null }[]	—	One series. Ignored when series is set.
labels	string[]	—	A label per reading, without times.
times / domain	number[] / [from, to]	—	Reading times and the window, in ms.
height	number	300	Total height in px, x-axis included.
minValue / maxValue	number	auto	The scale. Default: the readings, rounded to a tick.
unit / format	string / (v) => string	—	After each value, and how values round.
endLabels	boolean	false	Latest value per series in the gutter.
thresholds	Threshold[]	—	Dashed rules: value, label, short?, tone?.
band / bandLabel / bandTone	[lo, hi] / string / BandTone	—	A range band, named in the gutter.
answer	AnswerRowProps	—	Latest value, delta and verdict above the plot.
state	ChartState	'ready'	ready, loading, refetching, empty, stale or partial.
showDots / showGrid / smooth	boolean	true	Dots, gridlines with y labels, and curved segments.
lineColor	string	SERIES_LONE	Colour of a single series.
ariaLabel	string	'Line chart'	What the chart compares. The key hint is appended.
replay	number	0	Increment to replay the entrance.

Tokens

Token	Value	Where it lands
SERIES_RAMP	#1877F2	Series, in order; blue-1000 first.
SERIES_LONE	#00AEEF	A single series, blue-900.
SERIES_REFERENCE	#7F7D83	Reference line, 1.5px, grey-900.
THRESH_LINE.warn	#EC980C	Warning threshold rule, squash-800.
T.ink3	#4F4D55	Axis labels, grey-1000.
T.grid	#F1F1F1	Gridlines, grey-300.
T.baseline	#E6E6E6	The baseline under the plot, grey-500.
RAMP.grey[1200]	#1D1C20	Readout ground.
FOCUS	#1877F2	Focus ring around the plot, blue-1000.