Interactive Chart

sap.suite.ui.microchart.InteractiveBarChart | sap.suite.ui.microchart.InteractiveLineChart | sap.suite.ui.microchart.InteractiveDonutChart

Intro

The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.

Usage

Use the interactive 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 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.

Types

There are three types of interactive charts currently available:

Interactive Bar Chart

Filter by categorical data

Interactive Line Chart

Filter large sets of data by time period

Interactive Donut Chart

Filter by parts of a whole

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

Interactive Bar Chart (guidelines)
Interactive Line Chart (guidelines)
Interactive Donut Chart (guidelines)
Analytical List Page (guidelines)

Implementation

Interactive Bar Chart (SAPUI5 samples)
Interactive Bar Chart (SAPUI5 API reference)
Interactive Line Chart (SAPUI5 samples)
Interactive Line Chart (SAPUI5 API reference)
Interactive Donut Chart (SAPUI5 samples)
Interactive Donut Chart (SAPUI5 API reference)