Updated: June 12, 2019

Bullet Micro Chart

sap.suite.ui.microchart.BulletMicroChart

Intro

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.

Bullet micro chart without forecast
Bullet micro chart without forecast
Bullet micro chart with forecast
Bullet micro chart with forecast
Bullet micro chart with only delta value shown
Bullet micro chart with only delta value shown

The actual value is shown as a colored horizontal bar, the target value as a vertical line (marker), and the thresholds as indicators above and below the bar. The actual and target values 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.

Usage

The bullet micro chart can be embedded into a tablelist, tile, and header.

Responsiveness

The bullet micro chart is fully responsive. The size adjusts dynamically based on the dimensions of the parent container. In addition, there are also four fixed sizes – L, M, S and XS. Each fixed size is a snapshot of the fully responsive micro chart for specific dimensions.

Bullet micro chart - Size L
Bullet micro chart - Size L
Bullet micro chart - Size M
Bullet micro chart - Size M
Bullet micro chart - Size S
Bullet micro chart - Size S
Bullet micro chart - Size XS
Bullet micro chart - Size XS

You can use the smallest XS size to embed the bullet micro chart in the table cells of the grid table, analytical table, or tree table (also in condensed mode). Left-align the bullet micro chart in the table cell.

Bullet micro chart in size XS in a grid table
Bullet micro chart in size XS in a grid table

Maximum and Minimum Sizes

The bullet micro chart can have the following dimensions:

Width Height
Maximum 320 px 94 px
Minimum 64 px 18 px

If the chart height is less than 56 px, the labels are hidden.

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