Updated: July 13, 2017

Bullet Chart – Color Use for Primary and Projected Values

Intro

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

Default Colors

By default, the sequential palette is used.
For primary values, use the level @sapUiChartPaletteSequentialHueLight1 as described below.

Primary value @sapUiChartPaletteSequentialHue1Light1
Projected value @sapUiChartPaletteSequentialNeutralLight3
Primary value (sequential color) and projected value (neutral color) - Sequential palette
Primary value (sequential color) and projected value (neutral color) - Sequential palette

Colors for Primary Value

You can make use of different colors to differentiate between categories.

Primary Values Without Semantic Meaning

If the colors have no semantic meaning, but are just used to distinguish between categories, use the first hues of the sequential palette.

In this example, “Country 2” is set to green to highlight this category.

Primary value @sapUiChartPaletteSequentialHue1Light1
Primary value (highlighted) @sapUiChartPaletteSequentialHue2Light1
Projected value @sapUiChartPaletteSequentialNeutralLight3
Primary value (with different colors by category) and projected value (neutral color) - Sequential palette
Primary value (with different colors by category) and projected value (neutral color) - Sequential palette

Primary Values With Semantic Meaning

When using semantic colors for the primary value, use a neutral color for the projected value:

Primary value @sapUiChartPaletteSemanticBad / @sapUiChartPaletteSemanticGood / @sapUiChartPaletteSemanticCritical
Projected value @sapUiChartPaletteSemanticNeutralLight3
Primary value (semantic colors) and projected value (neutral color) - Semantic palette
Primary value (semantic colors) and projected value (neutral color) - Semantic palette

Primary Values With a Gap

By default, the semantic palette is used:

Primary value @sapUiChartPaletteSemanticNeutralDark1
Gap above comparison value @sapUiChartPaletteSemanticBad or @sapUiChartPaletteSemanticGood
Projected value @sapUiChartPaletteSemanticNeutralLight3
Primary value (neutral nolor) with gap above (semantic color) and projected value (neutral color) - Semantic palette
Primary value (neutral nolor) with gap above (semantic color) and projected value (neutral color) - Semantic palette

When showing projected values, avoid having gaps below the comparison value.

Don't
Primary value (neutral color) with gap below (semantic color) and projected value (neutral color) - Semantic palette
Primary value (neutral color) with gap below (semantic color) and projected value (neutral color) - Semantic palette

Primary Values With Additional Value

By default, the sequential palette is used.
Use the level @sapUiChartPaletteSequentialHueLight1 for primary values and additional values as described below.

Primary value @sapUiChartPaletteSequentialHue1Light1
Additional value @sapUiChartPaletteSequentialHue2Light1
Projected value @sapUiChartPaletteSequentialNeutralLight3
Primary value with additional value (sequential distinct colors) and projected value (neutral color) - Sequential palette
Primary value with additional value (sequential distinct colors) and projected value (neutral color) - Sequential palette

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 to represent the additional value.

For more information about shades, see color palettes.

Primary value @sapUiChartPaletteSequentialHue1
Additional value @sapUiChartPaletteSequentialHue1Light2
Projected value @sapUiChartPaletteSequentialNeutralLight3
Primary value with additional value (sequential distinct colors) and projected value (neutral color) - Sequential palette
Primary value with additional value (sequential distinct colors) and projected value (neutral color) - Sequential palette

When displaying two series of measures, each one with additional values, use two different colors to distinguish between the series.

Use a darker shade for the actual values and a lighter shade for the additional values.
For more information about shades, see color palettes.

Primary value @sapUiChartPaletteSequentialHue1 & @sapUiChartPaletteSequentialHue2
Additional value @sapUiChartPaletteSequentialHue1Light2 & @sapUiChartPaletteSequentialHue2Light2
Projected value @sapUiChartPaletteSequentialNeutralLight3
Primary value with additional value and projected value (2 series of measures) - Sequential palette
Primary value with additional value and projected value (2 series of measures) - Sequential palette

Colors for Projected Value

Projected Values With Semantic Colors

When using semantic colors for the projected value, use a neutral color for the primary value.

Never use semantic colors for both the primary and the projected value.

Primary value @sapUiChartPaletteSemanticNeutralDark1
Projected value @sapUiChartPaletteSemanticGoodLight3 or @sapUiChartPaletteSemanticBadLight3 or @sapUiChartPaletteSemanticCriticalLight3
Primary value (neutral color) and projected value (semantic colors) - Semantic palette
Primary value (neutral color) and projected value (semantic colors) - Semantic palette
Don't
Primary value (semantic color) and projected value (semantic color)
Primary value (semantic color) and projected value (semantic color)