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.

<div> <div></div> <div></div> </div> <div> <div><strong>Primary value</strong></div> <div>sapUiChartPaletteSequentialHue1</div> </div> <div> <div><strong>Additional value</strong></div> <div>sapUiChartPaletteSequentialHue1Light2</div> </div>

Primary value and additional value - Sequential palette

Primary value and additional value - Sequential palette

style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint

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.
<div> <div></div> <div></div> </div> <div> <div><strong>Primary value</strong></div> <div>sapUiChartPaletteSemanticBad / sapUiChartPaletteSemanticGood</div> </div> <div> <div><strong>Additional value</strong></div> <div>sapUiChartPaletteSemanticNeutralLight2</div> </div>

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

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

style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint
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.
<div> <div></div> <div></div> </div> <div> <div><strong>Primary value</strong></div> <div>sapUiChartPaletteSemanticBad / sapUiChartPaletteSemanticGood</div> </div> <div> <div><strong>Additional value</strong></div> <div>sapUiChartPaletteSemanticBadLight2 / sapUiChartPaletteSemanticGoodLight2</div> </div>

Primary value (semantic color) and additional value (semantic color) - Semantic palette

Primary value (semantic color) and additional value (semantic color) - Semantic palette

style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint
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

Elements and Controls