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. {requests.slice(0, 3).map((item) => )}

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}'}. {colors.map((color) => )}

Vertical Add vertical to the list to stack the items. {traffic.map((item) => )}

Marker only Use a bare legend-dot when the label lives elsewhere.

{colors.map((color) => )}

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. Requests

341.0k

{requests.map((item) => )}

Above a chart Large items show the latest value of each series, so the chart needs no legend of its own. {latency.map((item) => )}

Large vertical Combine size="lg" with a vertical list for a side panel. {storage.map((item) => )}

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. {latency.slice(0, 3).map((item) => )}

Without lines Leave out divided when the items sit in a tight space or wrap to more rows. {traffic.map((item) => )}

Loading Use placeholder blocks for the label and the value while the data loads.

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.

{traffic.map((item) => )}

With a progress bar Label the segments of a progress-separated bar.

Using 5.7 GB of 8 GB

{storage.map((item) =>

)}

{storage.map((item) => )}

Filter links Link items with href work as filters. Mark the current one with active.