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.

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:

Related information about last selected item
Number of selected items
Related actions

For more information, see the table below.

Popover structure

Popover structure

<div> <div>Section</div> <div>Explanation</div> <div>Provided by default</div> <div>Customizable</div> </div> <div> <div><strong>Related information about last selected item</strong></div> <div>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.</div> <div>Yes</div> <div>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.</div> </div> <div> <div><strong>Number of selected items</strong></div> <div>Displays the number of items in the selection. Only used when multiple items are selected.</div> <div>Yes</div> <div>No</div> </div> <div> <div><strong>Related actions</strong></div> <div>Displays actions that act on all selected items.</div> <div>No</div> <div>Yes. The app developer can add its own actions. See the section below about related actions.</div> </div>

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.

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