The legend explains the meaning of all the visual elements contained in the plot area.
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.
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
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.
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.
Legend with default order
Legend with new order
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.
Legend with custom texts
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.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.