Intro

This article provides guidelines for using color to indicate primary values in bullet charts.

Primary Value Only

By default, the chart will automatically assign the first color of the qualitative palette to all the bars.

If the colors have no semantic meaning, but are just used to distinguish between categories, use the qualitative palette.

Use the colors from the qualitative palette in the prescribed order (blue first, green next, and so on), unless you have a good reason to defer from the default sequence.
In the example, “Country 2” is set to green to highlight this category.

 

Primary value - Qualitative palette
Primary value - Qualitative palette
Primary values only with different colors by category - Qualitative palette
Primary values only with different colors by category - Qualitative palette

Primary and Additional Values

By default, use the qualitative palette. Use the first color on the palette for the primary value and the second color for the additional value.

Primary value and additional value - Qualitative palette
Primary value and additional value - Qualitative palette

If you need another color for the additional value, you can assign it manually.

If the additional value represents something less important that doesn’t need to be clearly visible at first glance, you can use a lighter shade from the sequential palette to represent the additional value.

For more information about shades, see color palettes.

 

Primary value sapUiChartPaletteSequentialHue1
Additional value sapUiChartPaletteSequentialHue1Light2
Primary value and additional value - Sequential palette
Primary value and additional value - Sequential palette

If the sum of the primary value and the additional value is the most important information, then use the qualitative palette. Use the first color for the primary value and the second color for the additional value.

For more information about shades, see color palettes.

Primary value and additional value - Qualitative palette
Primary value and additional value - Qualitative palette

Semantic colors can be used to show how the primary value compares in regards to the comparison value.

Primary value sapUiChartPaletteSemanticBad / sapUiChartPaletteSemanticGood
Additional value sapUiChartPaletteSemanticNeutralLight2
Primary value (semantic color) and additional value (neutral color) - Semantic palette
Primary value (semantic color) and additional value (neutral color) - Semantic palette

Semantic colors can also be used to show how the sum of the values (primary plus additional value) compares in regards to the comparison value.
In order to do so, use a dark color for the primary value and a light color for the additional value.

Primary value sapUiChartPaletteSemanticBad / sapUiChartPaletteSemanticGood
Additional value sapUiChartPaletteSemanticBadLight2 / sapUiChartPaletteSemanticGoodLight2
Primary value (semantic color) and additional value (semantic color) - Semantic palette
Primary value (semantic color) and additional value (semantic color) - Semantic palette

Avoid using semantic colors for the additional value only. This is misleading in the context of a bullet chart where the main focus should be the comparison with the comparison value.

Don't
Primary value (neutral color) and additional value (semantic color) - Semantic palette
Primary value (neutral color) and additional value (semantic color) - Semantic palette

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

  • No links.