The chart toolbar acts as a container for charts.

The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in Size of the Chart Container).

The toolbar is mandatory. Small charts or micro charts, such as dashboards, table cells, and small frames are an exception to this rule. In these cases, the developer must provide a consistent UI to enable action on the chart.

The toolbar is always placed on top of the chart. It provides actions such as multiple box selection for selecting dimensions, full screen format, personalization actions, and a toggle function for showing and hiding legends.

Responsiveness

The chart container uses the sap.m.OverflowToolbar control. It is a container based on sap.m.Toolbar that provides overflow when its content does not fit in the visible area. For more information, please refer to the toolbar overview article (under Responsiveness).

Components

Behavior and Interaction

Business Actions

Perspective Switch / Chart Title (Generic)

The perspective switch is left-aligned in the toolbar. It can be used to switch between different dimensions. We recommend using a select control, but any other dropdown control can be used as well.

For SAP Smart Business apps, the view incorporates and defines the chart description, the dimension, the measure, and the defaulted chart type. The various views are preconfigured and maintained by an SAP Smart Business administrator.

Ensure that all switches have a meaningful title. We recommend using a short chart description followed by the dimensions:

You also have the option of extending the perspective switch if the app needs to switch between specific subdimensions. The number of dimensions and subdimensions that are needed depends on the app.

If the app does not need a perspective switch, use the chart title (property: title).

View Switch (Generic)

View Switch – Switch Between Chart and Table

The view switch allows you to switch easily between tables and charts.

Some actions are only available in certain views. For example, the Legend icon is only visible in the chart view. If the user selects the table view, the Filter action is visible and the Legend icon is hidden.

Icon Usage

Each visualization of a chart is represented by an icon.

Legend (Generic)

The chart Legend button (property: ShowLegend) is placed next to the view switches. The user clicks this button to hide or show the legend.

The legend also allows the user to select or deselect data points.

Icon Usage

The legend is represented by the following icon:

Personalization (Generic)

Developers can add a Personalization button to the app’s chart toolbar to enable app-specific personalization charting (property: ShowPersonalization). The corresponding popover and details also need to be implemented by the developer.

We do not recommend using this feature. If you do choose to use it, exercise caution as the toolbar’s perspective switch feature already allows the preconfiguration of several combinations of dimensions, measures, and selections of chart types.

Hence, the developer should decide on the most valuable chart/dataset combinations for the end user beforehand.

When viewing charts, users do not usually want to think about what chart types, dimensions, or measures are most suitable in a particular use case. Therefore, the app should provide users with the most appropriate preconfigured chart view.

Icon Usage

Personalization is represented by the following icon:

Zoom In/Zoom Out (Generic)

To help visually impaired users, always offer the zoom feature on the chart toolbar. Two icon buttons depicting a magnifying glass are then displayed. These buttons are positioned just to the left of the full screen icon. When the user clicks the Zoom In or Zoom Out button, the chart automatically zooms accordingly.

Icon Usage

The zoom in/out functionality is represented by the following icons:

Full Screen Mode (Generic)

In addition to zooming, the app can use the full screen mode of the chart container (property: FullScreen). The full screen button is located between the personalization button and the view switch.

The user can switch between embedded and full screen mode via this toggle button. When maximized, the chart’s full screen icon is replaced by the exit full screen icon.

In full screen mode, the chart and toolbar occupy the entire screen width and cover the shell bar.

Icon Usage

The two screen modes are represented by the following icons.

Overflow (Generic)

Please see the section on overflow in the Behavior and Interaction section of the toolbar overview article.

Guidelines

Please see the detailed Guidelines section of the toolbar overview article.

Additional Guidelines

• Think carefully about what actions you really need in the chart toolbar – do not overload the toolbar with actions.
• Try to put the actions as close to the content as possible.
• Use appropriate tooltips to label icon buttons in the chart toolbar.

Resources

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