UI Elements Data Visualization Interactive Chart Interactive Bar Chart

Updated: July 14, 2020
SAPUI5 Version 1.112

Interactive Bar Chart

sap.suite.ui.microchart.InteractiveBarChart

Intro

The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).

It allows the user to filter by categorical data. Depending on how the data is sorted, this would be the biggest or the smallest filter values by measure.

Usage

Use the interactive bar chart if:

  • You want to give the user the possibility to visually filter data in the analytical list page.
  • You want the user to gain insights before filtering large datasets with the visual filter bar.

Do not use the interactive bar chart if:

  • You want to visualize data without using it for filtering.
  • You are not using the visual filter bar.
  • You want to visualize data for more complex scenarios. In this case, use the VizFrame chart instead.

Responsiveness

The interactive chart is fully responsive and supports both cozy and compact content density.

Layout

The interactive bar chart consists of two mandatory areas – a filter label and an area containing the measure and visualization of the chart. The control itself does not contain an axis title.

Interactive bar chart - Layout
Interactive bar chart - Layout

Filter Labels

The filter labels are left-aligned and may be truncated if not enough space is available.

Measure and Visualization

The interactive bar chart can display percentage and actual values as a measure but never a mix of both at the same time. Always display measures using one decimal point. Measures should always be visible and never truncated.

The interactive bar chart does not support coloring, and the default color of the bars should not be customized.

Do
Do: Display measures as actual or percentage values
Do: Display measures as actual or percentage values
Don't
Don't: Display a mix of both actual and percentage values
Don't: Display a mix of both actual and percentage values

Values

The interactive bar chart can display positive, negative, and mixed (positive and negative) measure values.

Display of positive and negative measures
Display of positive and negative measures

Semantic Colors

The interactive bar chart supports semantic colors that are shown as color markers. Since interactive charts are used to filter content visually, these markers give users even greater clarity when evaluating the information.

Use semantic colors when you want to make users aware of critical thresholds or categories.

Example of a semantic color
Example of a semantic color

Behavior and Interaction

Selecting and deselecting a bar is toggle-like behavior – if the user clicks  a selected bar, it becomes deselected, and vice versa. By default, the interactive bar chart supports multiple selections – the user can select more than one filter value.

Interactive bar chart - Interaction
Interactive bar chart - Interaction

Guidelines

Use the interactive bar chart in the visual filter bar if you would like to have a filter for the highest or lowest values of a filter dimension. For example, to filter for the highest or lowest margin, revenue, or cost related to a project.

The interactive bar chart used in the visual filter bar contains a maximum of three filter values with their corresponding measures.

In general:

  • Display the measure labels with one decimal point.
  • Do not display an axis title.
  • Do not display any scrollbars.

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