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
Area micro chart

Usage

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

Responsiveness and Adaptiveness

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 - Normal mode
Area micro chart - Wide mode
Area micro chart - Wide mode
Area micro chart without thresholds
Area micro chart without thresholds

Components

The actual values are displayed as a solid line, the target values 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.

If there are only left and right labels, each takes 50% of the width of the chart. Always try to keep the label short enough to fit into the space. Bear in mind that if one of the labels on the bottom (or on the top) truncates, both labels on the bottom (or on top) will be hidden.

If there are min and max value labels as well, their width is calculated by what is left from the total width of the chart minus the sum of left and right labels. If the min or the max value label gets truncated, both min and max will be hidden.

Area micro chart - Components
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

Implementation