# Legend
> A legend labels the series of a chart or a progress bar with a colored marker, a name and an optional value.
Label chart series with colored markers. Group legend items in a list, add values, and let users toggle series on click.
Source: https://docs.tabler.io/ui/components/legend
---
## 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.
```html
```
## 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.
```html
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.
```html
```
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.
```html
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.
```html
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.
```html
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.
```html