Micro Chart

sap.suite.ui.microchart.AreaMicroChart | sap.suite.ui.microchart.BulletMicroChart | sap.suite.ui.microchart.ColumnMicroChart | sap.suite.ui.microchart.ComparisonMicroChart | sap.suite.ui.microchart.DeltaMicroChart | sap.suite.ui.microchart.HarveyBallMicroChart | sap.suite.ui.microchart.LineMicroChart | sap.suite.ui.microchart.RadialMicroChart | sap.suite.ui.microchart.StackedBarMicroChart

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.
  • You want to display extensive data. Use the vizFrame chart instead.

Responsiveness and Adaptiveness

All micro charts are fully responsive. The size of the control adapts automatically to the size of the surrounding container and does not have a defined width or height. Alternatively, you can use the size property with the control, which allows you to render the micro charts in the available fixed sizes (XS, S, M, L, Auto and Responsive).

Types

The following micro charts are currently available:



Choosing the Correct Chart Type

Charts are used to visually represent the relationships between numeric values. In order to choose the correct chart type, it’s important to define the type of relationship you want to illustrate.

Ranking

If you want to rank items from highest to lowest, or vice versa, we recommend using the comparison (bar) micro chart. For time-based categories, the column micro chart is more appropriate.

Comparison

To compare items that don’t have a particular order, you can use the comparison micro chart (offering category and value labels for each part) or the column micro chart.

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.

To compare value totals within and across different categories, you can use the stacked bar micro chart.

Variation over Time

By convention, time is represented horizontally from left to right which means it’s best to use the horizontal axis to represent the time in chart visualizations.

To show changes in measures over time, you can use the line micro chart, the column micro chart, and the area micro chart. The exact chart type depends on the type of change you want to visualize.

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.

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.

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 deviating values, use the column micro chart (suitable for showing variances), or the comparison micro chart (offering category and value labels).

The bullet micro chart shows the difference between two values (actual and target) or three values (actual, target, and forecast) at a given point in time.

The delta micro chart helps to visualize a delta value (difference) between two main key figures, which can be time-related or category-based.

Distribution

To visualize how values are distributed within a set, we recommend using the column micro chart or the comparison micro chart (offering category and value labels). The stacked bar micro chart shows the distribution of values as part of a whole.

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

Behavior and Interaction

Clicking/Tapping (Optional)

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

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