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).

Several chart types are available: bullet chart, trend chart, column chart, and comparison chart.

Responsiveness

All micro charts are fully responsive.

Types

There are different types of micro charts currently available:

• Bullet
• Column
• Trend
• Comparison
• Delta

Bullet Chart

A bullet chart is a variation of a bar graph originally developed by Stephen Few and adapted by SAP Fiori in order to fulfill additional requirements. Much like the traditional thermometer charts and progress bars found in many dashboards, the bullet chart serves as a replacement for dashboard gauges and meters.

The bullet chart features a single, primary measure (for example, current year-to-date revenue). It compares that measure to one or more other measures to enrich its meaning (for example, compared to a target), and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good.

The actual value is shown as a horizontal bar, the target value as a vertical line (marker), and the thresholds as indicators below the bar. The actual value and target value can have a label.

Only semantic colors (good, critical, bad, neutral) can be used for the actual value.

The forecast is shown as a bar with a lighter tint of the same color as the actual value in the background.

Based on the data points you want to show, choose one of the following visualizations:

• Actual value vs. target value.
• Actual value vs. target value with forecast.
• The delta between the actual value and the target value. For this option, the delta is shown as a bar starting or ending at the target marker.

Column Chart

A column chart (also known as a bar chart) uses rectangular bars to compare categories. One axis of the chart shows the specific categories being compared, the other axis represents a value.

Note: The current version does not show axis or data point labels.

Only semantic colors (good, critical, bad, neutral) can be used.

Trend Chart (Area Chart)

A trend chart is a line and area chart that provides the same information as a bullet chart, with one exception: A bullet chart shows an additional forecast value, but a trend chart provides information for a specific range of time.

The actual value is shown 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 value, the end value, the minimum value, the maximum value, and the beginning and end of the time range.

Comparison Chart

The comparison chart is a bar chart. It compares entries in a top N list. You can choose between two different layouts depending on the available space/parent container. And you can use the semantic color palette as well as the chart palette.

Delta Chart

The delta chart helps to visualize a delta value between two main key figures. The delta can be a positive or negative value. Configured thresholds define the semantic coloring of the delta bar. The left-aligned labels can be omitted, whereas the right-aligned labels with the values are always shown.

Behavior and Interaction

Clicking/Tapping (Optional)

The charts include one behavior or 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.