Area Micro Chart

sap.suite.ui.microchart.AreaMicroChart

Intro

An area micro chart is a trend chart, which provides information for actual and target values for a specific time range. These values are visualized as segmented lines, and can be compared to threshold areas shown in the background.

Area micro chart

Usage

The area micro chart can be embedded into a table, list, tile, or header.

Responsiveness

See the micro chart overview article.

Layout

The area micro chart can be visualized in normal or wide mode. When no thresholds are defined, the area micro chart shows only the lines on a transparent background.

Area micro chart - Normal mode

Area micro chart - Wide mode

Area micro chart without thresholds

Components

The actual value is displayed as a solid line, the target value as a dotted line, and the thresholds as colored areas in the background.

You can show labels for the start and end values, the maximum and minimum values, and the beginning and end of the time range.

Area micro chart - Components

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

Micro Chart (guidelines)
Color Palette (guidelines)
Chart Types (guidelines)

Implementation

Area Micro Chart (SAPUI5 samples)