Updated: December 19, 2016

Chart – Selection

Intro

The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.

Default Selection

The charts provide three types of selections:

No Selection

In this mode, data points cannot be selected individually and therefore no actions can be triggered from a data point.

  • When the user clicks or taps a data point, nothing happens.
  • When a user with a mouse device hovers the pointer over a data point, nothing happens.

Single Selection

In single-selection mode, the user clicks or taps a data point to select it. Clicking or tapping another data point selects this data point and deselects the previously selected one.

Clicking or tapping a blank area deselects a selected data point.

Example of single selection
Example of single selection

Multiselection

This is the default mode.

In multiselection mode, the user clicks or taps a data point to add it to the selection.

Clicking or tapping a blank area deselects all selected data points.

Example of multiselection (default mode)
Example of multiselection (default mode)

Shortcut for Multiselection

The following actions are shortcuts for selecting multiple data points:

  • Click or tap a category label: All associated data points are selected.
  • Click or tap a legend item: All associated data points are selected.
  • Rubber-band-like lasso selection: All data points within the lasso are selected.
Example of multiselection (shortcut)
Example of multiselection (shortcut)

Deselection

Clicking or tapping a selected item deselects it again.

Clicking or tapping a blank area of the chart deselects all data points that are currently selected.

Appearance

Selected and non-selected items differ in terms of their appearance as follows:

  • Selected items are highlighted by using a darker color.
  • Non-selected items have a lighter color.

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