Legend

Names each series in a chart, so its colours can be read.

Live React portWildLegend.vueData Display/LegendLegend

Try it

Change the number of series and add a reference to see which colour each key takes.

Block 3Block 7Block 12Last 7 days

Series

Reference

Period

<Legend
  items={[
    { label: 'Block 3' },
    { label: 'Block 7' },
    { label: 'Block 12' },
  ]}
  period="Last 7 days"
/>

When to use

Use a legend above a chart with two or more series. A lone series needs none, because the card title names it.
With four series or fewer, also turn on the chart’s end labels, so each line is named where it ends.
Add a period on the right when the chart covers a time range.
Use a hollow key (dashed) for a reference series, such as a farm average, to match its hollow dots.

Don’t use it

To switch what the chart shows. Keys aren’t buttons, so use a Segmented controller.
For more than five series. The ramp has five colours, so split the chart or use a Table.

Anatomy

A key and a label for each series, then an optional period on the right. On a narrow card the keys wrap to a second line.

Block 3Block 7Block 12Last 7 days

keys, labels and period

Block 3Block 7Block 12Block 15Last 7 days

wrapped on a narrow card

<Legend
  items={[
    { label: 'Block 3' },
    { label: 'Block 7' },
    { label: 'Block 12' },
  ]}
  period="Last 7 days"
/>

Colours

Leave out color and solid keys take the series ramp in order, as the line chart’s lines do. A reference key is hollow and grey, so it stands out by its shape as well as its colour.

Block 3Block 7Block 12Block 15Block 21

five series

Block 3Farm average

with a reference

<Legend
  items={[
    { label: 'Block 3' },
    { label: 'Block 7' },
    { label: 'Block 12' },
    { label: 'Block 15' },
    { label: 'Block 21' },
  ]}
/>

<Legend
  items={[
    { label: 'Block 3' },
    { label: 'Farm average', dashed: true },
  ]}
/>

Pass color when the chart sets its own, so each key matches its line.

Content

Name series that measure the same thing by what differs between them: Block 3, 10 cm, Farm average.
Keep the period short: Today, Last 7 days, 7-day forecast.
Use sentence case, and keep each label to a few words so the keys fit on one line.

Accessibility

A screen reader reads each label in order, then the period, and the keys are silent. Give the chart an ariaLabel that names the same series.

Key	What it does
Tab	Passes over the legend, which has nothing to operate.

Props

Prop	Type	Default	Description
items	{ label, color?, dashed? }[]	—	One key per series, in the chart’s order.
items[].label	string	—	The series name. See Content for when to add a unit.
items[].color	string	ramp or grey	Key colour. Leave out to match the line chart.
items[].dashed	boolean	false	A hollow grey key, for a reference series.
period	string	—	The time range, on the right.

Tokens

Token	Value	Where it lands
SERIES_RAMP	#1877F2	Solid keys, in order; blue-1000 first.
SERIES_REFERENCE	#7F7D83	A reference key, grey-900. 4.1:1.
T.legend	#2D2B32	Labels, grey-1100.
T.ink4	#4F4D55	The period, grey-1000.
--font-size-xs	11px	Labels and the period.
--font-weight-bold	600	Labels.
--font-weight-semibold	500	The period.
(no token)	9px, 3px corners	The key.
(no token)	2px	The dashed key’s outline.
--spacing-1-5	6px	Key to label.
--spacing-3-5	14px	Between keys.
--spacing-2	8px	Between wrapped lines.
--spacing-3	12px	Below the legend, above the plot.