Basic
A Legend is a marker and a label. Set the series color with color.
With values
Add value to show a number next to the label.
States
Links and buttons get a tinted background on hover. Use active to keep it and off for a hidden series.
Colors
Every palette color works with legend-{color}.
Vertical
Add vertical to the list to stack the items.
Marker only
Use a bare legend-dot when the label lives elsewhere.
Large
Set size="lg" to put a big value under the label. Add unit for the unit and divided on the list for the lines.
Under a stat
A legend row explains the split behind a single number.
Above a chart
Large items show the latest value of each series, so the chart needs no legend of its own.
Large vertical
Combine size="lg" with a vertical list for a side panel.
Large links
Large items work as links and buttons too. Mark the current one with active and a hidden series with off.
With units
Add unit to a regular item to show the unit after the value.
Without lines
Leave out divided when the items sit in a tight space or wrap to more rows.
Loading
Use placeholder blocks for the label and the value while the data loads.
Interactive legend
Button items call toggleSeries() on the chart and toggle legend-off.
Next to a donut
A vertical list beside a chart with its own legend hidden.
With a progress bar
Label the segments of a progress-separated bar.
Using 5.7 GB of 8 GB
Filter links
Link items with href work as filters. Mark the current one with active.