Intro

Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).

Usage

Use the micro chart if:

You want to provide tracking at a glance.

You want to display changes in the data in an easy and condensed way.

Do not use the micro chart if:

You are looking for interactive analytics. Use the analytical card instead.

Micro charts for ranking

Sometimes it can also be useful to show when a certain value reaches or exceeds a reference point (for example, when an actual value is compared to a target or forecast). In such cases, use a bullet micro chart. Keep in mind that the bullet micro chart shows data points for given points in time. Do not use it to show a time series.

If you want to emphasize the trend over time, use the area micro chart (which provides information for actual and target values, visualized and compared to threshold areas) or the line micro chart. If you want to emphasize the values themselves, use the column micro chart.

Micro charts for variation over time

Part to Whole

You can use several chart types that depict the contribution of individual values to a whole.

The typical chart for visualizing part of a whole is the Harvey ball micro chart. This is most suitable if you want to display a single value compared to its total. To show a single percentage value, use the radial micro chart.

The stacked bar micro chart works best for visualizing different values as part of one whole; its bars are shown next to each other. The comparison micro chart is better if you want to compare parts to each other and display category labels and value labels associated with each part.

Micro charts for part to whole

Deviation

These chart types visualize the difference or variance between two values (or two sets of values).

To show a time-related deviation between sets of values, use the area micro chart (for example, to show the difference between actual expenses and target expenses), or the line micro chart.

If you want to emphasize the shape of the distribution over time, use the line micro chart.

Micro charts for distribution

Behavior and Interaction

Clicking/Tapping (Optional)

The micro charts include one interaction: a click event that can be switched on or off.

“No data” Text

When data is missing, a white rectangular placeholder with the text “No data” is shown instead of the chart. The size of the placeholder depends on the size of the chart. No labels and tooltips are shown. The “No data” placeholder can be focused, but it’s not possible to attach a click event to it.

Area micro chart without data

Comparison micro chart without data

Line micro chart without data

Bullet micro chart without data

Delta micro chart without data

Radial micro chart without data

Column micro chart without data

Harvey Ball micro chart without data

Stacked bar micro chart without data

Guidelines

Truncation

Never truncate numeric labels, as this could be misleading for the user. If there is not enough space for the label, hide it.

“No data” Text

If the micro chart is placed in the cell of a table and there is no data for the chart, leave the cell blank (empty).

Micro charts without data in table cells

If the chart is used in the micro chart facet of the object page header and data is missing, make sure the footer of the facet is removed as well if it doesn’t add any value for the user.

Micro charts without data in the object page header

Resources

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