Updated: October 4, 2018

Bullet Chart

Intro

The bullet chart is used to compare primary and secondary (comparison) values.

Encoded Values

Primary Values

Frequently used for actual values, primary values can also be used for any type of value that you want to compare to the secondary/comparison value.

Secondary/Comparison Values

Frequently used for target and plan values, comparison values can also be used to compare the primary value with any other value. There are use cases where the comparison value is used to express a forecast, a competitor, or a specific year.

Additional Values

The bullet chart can also express an additional value so long as it’s directly related to the primary value.

Orientation

The bullet chart can be orientated horizontally or vertically. It’s best to orientate it vertically for time series.

Horizontal bullet chart
Horizontal bullet chart
Vertical bullet chart
Vertical bullet chart

Color Palette

If nothing is customised, the bullet chart will automatically use colors from the qualitative palette.

However, it is also possible to customize the colors (for example, if you want to differentiate between categories). For more information, check out the article on bullet chart colors.

SAP Fiori chart palettes
SAP Fiori chart palettes

Selection and Popover

Unlike other charts, when the user clicks on a bullet, all the associated values are displayed in the popover – primary value, comparison value along with additional value, projected value, and qualitative ranges (if used). The popover can also be customized to display other information and actions if you wish.

Popover
Popover

Legend

As with all other charts, when you customize the colors, the text of each legend item must also be manually maintained because the chart component cannot guess the meaning of each color.

For more information, see legend.

Legend
Legend

Negative Values

The horizontal and the vertical bullet charts can support negative values. Negative values can be applied to both the primary and the secondary (comparison) values.

Horizontal bullet chart with negative values
Horizontal bullet chart with negative values

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