Updated: July 15, 2021

Chart Popover

Intro

A chart popover is used to display information or an action related to the selected data points of a chart.

By default, the chart popover:

  • 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 with information about this selected item only. The item that was previously selected becomes deselected.

Popover in single-selection mode
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 the 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
Popover in multiselection mode

Structure

The following image provides an overview of the popover structure:
  1. Related information about last selected item
  2. Number of selected items
  3. Related actions

For more information, see the table below.

Popover 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 popover 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 in the chart. Measures are displayed below with their associated values.
Default display
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
Multiple dimensions display
If the selected item contains multiple measures, all measures are displayed above the category.
Multiple measures display
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
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
Example of in-place navigation

Customization and UI Controls

The UI controls for customizing the popover are listed below.

sap.m.responsivePopover:

  1. Use SAPUI5-formatters
 (currency included)
  2. sap.m.ActionListItem

In-Place Navigation:

  1. sap.m.List with sap.m.StandardListItem type=”Navigation”
  2. sap.m.NavContainer
 for the animation 
(left to right and right to left)
  3. sap.m.Page for the scroll bar
UI controls for customization – sap.m.responsivePopover
UI controls for customization – sap.m.responsivePopover
UI controls for customization – In-place navigation
UI controls for customization – In-place navigation

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

Implementation

Cross Feature Popover (SAPUI5 sample)