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 table, list, 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:

<div> <div></div> <div><strong>Width</strong></div> <div><strong>Height</strong></div> </div> <div> <div>Maximum</div> <div>320 px</div> <div>94 px</div> </div> <div> <div>Minimum</div> <div>64 px</div> <div>18 px</div> </div>

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

Elements and Controls

Micro Chart (guidelines)
Color Palette (guidelines)
Chart Types (guidelines)

Implementation

Bullet Micro Chart (SAPUI5 samples)
Bullet Micro Chart (SAPUI5 API reference)