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

Position

The legend is always displayed vertically, on the right hand side of the chart. In future wave, it will be possible to display the legend on top or at the bottom of the chart.

Responsiveness

When the chart is too narrow, the legend is displayed in an overlay above the chart, so that all legend items can be read. This is particularly important for smartphones.

By default, the legend must always be hidden on small screens.

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 (or tapping) on 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 data set 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 data set, 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