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 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 a data point to select it. Clicking another data point selects this data point and deselects the previously selected one.
Clicking a blank area deselects a selected data point.
Example of single selection
Multiselection
This is the default mode.
In multiselection mode, the user clicks a data point to add it to the selection.
Clicking a blank area deselects all selected data points.
Example of multiselection (default mode)
Shortcut for Multiselection
The following actions are shortcuts for selecting multiple data points:
- Click a category label: All associated data points are selected.
- Click 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)
Selection by API
The way in which data points are selected when they are clicked can also be changed through the vizSelection (aPoints, oAction) API.
Example: Category Selection
You can implement category selection by using the vizSelection (aPoints, oAction) API. When the user clicks a data point, all data points in the same category are selected.
Example with stacked bars:
When the user clicks a bar, all bars in the same stack are selected.
Example of category selection - First click
When the user clicks another stack, this stack is added to the selection. The selection then contains all items of the two selected stacks.
Example of category selection - Second click
Example: Series Selection
You can implement series selection by using the vizSelection (aPoints, oAction) API. When the user clicks a data point, all data points in the same series are selected.
Example with Line Chart:
When the user clicks a data point, all data points in the same line (series) are selected.
Example of series selection - First click
When the user clicks another line, this line is added to the selection. The selection then contains all items of the two selected lines.
Example of series selection - Second click
Deselection
Clicking a selected item deselects it again.
Clicking 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.