The legend explains the meaning of all the visual elements contained in the plot area.

Layout

You can decide where you want to legend to be positioned. By default, it is displayed to the right of the plot area, but it can also be displayed below it when the chart scrolls horizontally. However, we recommend displaying to the right of the plot area when you have many legend items.

Responsiveness

When the legend is displayed to the right of the plot area, it automatically moves to the bottom when the horizontal space is reduced as illustrated below.

Behavior and Interaction

Show/Hide Legend

The legend can be hidden or shown via a dedicated standard button in the chart toolbar (not a toggle button). The visibility of the legend changes each time the button is pressed.

Select Legend Item

Clicking a legend item selects or deselects all the associated data points. It does not show or hide them, although this functionality is in the roadmap for this control.

Custom Legend Items

By default, the chart component displays a legend based on the dataset and the colors used by the chart. All colors displayed in the chart are listed in the legend.

By default, the order of the legend item is the same as the order used to render the dataset, although the order and labels of legend items can be customized.

Order

The order of the legend items can be customized to help users read it. In the example below, the default order does not respect the chronological order (which makes the legend difficult to read). Changing the order helps users recognize the information better.

Text

It is not possible to customize the legend labels when colors are automatically assigned by the chart component. When the colors are set programmatically (such as by using value-based colors), it’s possible to customize the legend items in order to clearly describe the meaning of the color.

Titles

By default, the legend does not display a title, although a title can be displayed manually on top of the legend. However, we recommend only displaying a title if doing so will help users understand the legend items or make the legend item labels shorter.

Resources