---
title: Legend
summary: A legend labels the series of a chart or a progress bar with a colored marker, a name and an optional value.
description: Label chart series with colored markers. Group legend items in a list, add values, and let users toggle series on click.
related: [/ui/plugins/chart, /ui/components/status, /ui/components/progress]
source: core/scss/ui/_legend.scss
docs-libs: [apexcharts]
classnames:
component:
- class: legend-dot
desc: Small square marker in the series color
- class: legend
desc: A marker with a label, on a span, link or button
- class: legend-list
desc: Wraps legend items in a row
part:
- class: legend-value
desc: Muted value next to the label
- class: legend-unit
desc: Small unit after the value, for example ms or GB
size:
- class: legend-lg
desc: Label on the first line and a big value below
style:
- class: legend-list-vertical
desc: Stacks the items in a column
- class: legend-list-divided
desc: Draws a line between the items, for large legends
state:
- class: active
desc: Keeps the hover background on a link or button
- class: legend-off
desc: Dims the item and greys the marker, for a hidden series
color:
- class: legend-{color}
desc: Any base color, for example legend-blue or legend-primary, on an item or on a marker
---
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';
import Chart from '@shared/components/demo/Chart.astro';
## Legend marker
A `legend-dot` is a small square in the color of a series. Use it on its own next to a label. Set the color with a `legend-{color}` class. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
## Legend item
Wrap the marker and the label in a `legend`. Put the color class on the item, so the marker and the hover background share it. Add a `legend-value` for a number next to the label.
Allowed 339.0k Denied 1.2k Challenged 815
## Interactive legend
Use a `button` or a link when clicking an item should toggle a series. The item gets a tinted background on hover, mixed from the series color. Add `active` to keep it, and `legend-off` to mark a hidden series.
With ApexCharts, hide the built-in legend and call `toggleSeries` with the series name:
```html
```
```js
document.querySelectorAll('.legend').forEach((item) => {
item.addEventListener('click', () => {
chart.toggleSeries(item.dataset.series)
item.classList.toggle('legend-off')
})
})
```
## Vertical list
Add `legend-list-vertical` to stack the items, for example next to a donut chart.
This year $92,400 Last year $84,300 Forecast $98,000
## Large legend
Add `legend-lg` to put the label on the first line and a big value below it. Wrap the unit in a `legend-unit`. Add `legend-list-divided` to the list to draw a line between the items. This size works well above a chart, where the legend also shows the key numbers.
P99 124 ms P95 76 ms P75 32 ms Requests 1,234
### Above a chart
Put the large items above a chart to show the latest value of each series. Turn off the chart's own legend, because the items already name the series.
P99 124 ms P95 76 ms P75 32 ms P50 10 ms
### Large links
Large items work as links and buttons too, for example as filters above a list. Add `active` to mark the current item and `legend-off` for a hidden one.