Chart Popover

Intro

A popover is used to display information or an action related to the selected data points. By default, the chart component:

Displays dimension members and measure values fed into the chart that relate to the data point.
Displays the number of selected items when in multiselection mode.
Does not display related actions.

The entire content of the popover can be changed or a related action can be added at the end.

Selection and Popover

The content displayed in the popover depends on the selection mode; in other words, whether the chart is in single-selection or multiselection mode.

When the user clicks an item that is not selected, the popover appears displaying information about this selected item only. The item that was previously selected becomes deselected.

In Single-Selection Mode

When the user clicks an item that is not selected, the popover appears displaying information about this selected item only. The item that was previously selected becomes deselected.

Popover in single-selection mode

In Multiselection Mode

When the user clicks an item that is not selected, the item is added to the selection. The popover appears with information about this last selected item and any other selected items. When the user clicks an item that is already selected, this item is removed from the selection. If there are no more selected items, the popover disappears.

Popover in multiselection mode

Structure

The following figure provides an overview of the structure:

Popover structure

Section	Explanation	Provided by default	Customizable
Related information about last selected item	Contains all related information about the last selected item. In single-selection mode, this is the single selected item. In multiselection mode, this is the last item added to the selection.	Yes	Yes. If the app developer wants different information, this section should be replaced entirely. Text only cannot be changed and another value cannot be added.
Number of selected items	Displays the number of items in the selection. Only used when multiple items are selected.	Yes	No
Related actions	Displays actions that act on all selected items.	No	Yes. The app developer can add its own actions. See the section below about related actions.

Default Information

By default, the chart component displays all information related to the last selected item. The first row displays dimension members. A color marker is displayed and uses the same color as the selected item. Measures are displayed below with their associated values.

Default display

With multiple dimensions, the dimension members are concatenated and displayed in the following order:

Firstly, the dimensions displayed in the legend.
Secondly, the dimension displayed in the axis. If there is more than one dimension in the axis, the dimension closest to the axis is displayed first.

The first row is wrapped if necessary.

Multiple dimensions display

If the selected item contains multiple measures, all measures are displayed above the category.

Multiple measures display

Number of Selected Items

If multiselection is possible, the popover displays the number of items that have been selected. If multiple items have been selected, it is not possible to display the values of all selected items. If you need to display these values, you will have to develop your own solution. For example, you can add a Compare Values or Display Values button at the bottom of the popover. This button is only displayed when multiple items have been selected.

Related Actions

You can add related actions at the end of the popover. These related actions may vary depending on the current selection. Related actions can generally be used to do the following:

Display more information.
Display another type of visualization.
Display another dataset.
Navigate to another page or app.

If an action is dedicated to showing more detailed information about the selection, use the View Details label. Actions that are specific to the entire chart or to the app should not be provided in the popover. In this case, it is better to provide them at app level, such as in the app toolbar.

Examples of popovers with one and three related actions

Group of Actions

Do not display more than four actions in the popover. If more are needed, use in-place navigation.

Example of in-place navigation

Customization and UI Controls

The UI controls for customizing the popover are shown below:

UI controls for customization

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Chart (guidelines)

Implementation

No links.