UI Elements - SAPUI5 Data Visualization Chart (VizFrame) Chart – Types Bullet Chart Color Use for Primary Values and Quantitative Ranges

Updated: December 19, 2016
SAPUI5 Version 1.26

Color Use for Primary Values and Quantitative Ranges

Intro

This article provides guidelines for using color to indicate primary values and quantitative ranges.

Primary Values and Quantitative Ranges

By default, use the sequential palette.

Primary value @sapUiChartPaletteSequentialHue1Light1
Quantitative range values @sapUiChartPaletteSequentialNeutralLight1 & @sapUiChartPaletteSequentialNeutralLight2 & @sapUiChartPaletteSequentialNeutralLight3
Primary value (sequential color) and quantitative range (neutral colors)
Primary value (sequential color) and quantitative range (neutral colors)
Warning

Not available yet!

Primary Values with Gap and Quantitative Ranges

Define which semantic color you want for the part above the comparison value.

Primary value @sapUiChartPaletteSemanticNeutralDark1
Quantitative range values  @sapUiChartPaletteSemanticNeutralLight1 & @sapUiChartPaletteSemanticNeutralLight2 & @sapUiChartPaletteSemanticNeutralLight3
Gap primary value above comparison value  @sapUiChartPaletteSemanticBad or @sapUiChartPaletteSemanticGood
Primary value (neutral color) with gap (semantic color) and quantitative range (neutral colors)
Primary value (neutral color) with gap (semantic color) and quantitative range (neutral colors)
Warning

Not available yet!

Only show gaps above the comparison value. Displaying gaps below the comparison value makes it difficult to read the chart.

Don't
Primary value (neutral color) with gap (semantic colors) and quantitative range (neutral colors)
Primary value (neutral color) with gap (semantic colors) and quantitative range (neutral colors)

Primary Values with Semantic Colors

When using quantitative ranges, it is possible to use semantic colors for the primary value.

Primary value @sapUiChartPaletteSemanticBad / @sapUiChartPaletteSemanticGood / @sapUiChartPaletteSemanticCritical
Quantitative range values @sapUiChartPaletteSemanticNeutralLight1 & @sapUiChartPaletteSemanticNeutralLight2 & @sapUiChartPaletteSemanticNeutralLight3
Primary value (semantic colors) and quantitative range (neutral colors)
Primary value (semantic colors) and quantitative range (neutral colors)
Warning

Not available yet!

Primary Values with Additional Values and Quantitative Ranges

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

Primary value @sapUiChartPaletteSequentialHue1
Additional value @sapUiChartPaletteSequentialHue2
Quantitative range values @sapUiChartPaletteSequentialNeutralLight1 & @sapUiChartPaletteSequentialNeutralLight2 & @sapUiChartPaletteSequentialNeutralLight3
Primary value and additional value (sequential colors) and quantitative range (neutral colors)
Primary value and additional value (sequential colors) and quantitative range (neutral colors)
Warning

Not available yet!

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
Quantitative range values @sapUiChartPaletteSequentialNeutralLight1 & @sapUiChartPaletteSequentialNeutralLight2 & @sapUiChartPaletteSequentialNeutralLight3
Primary value with additional value (1 sequential color and distinct lightness) and quantitative range (neutral colors)
Primary value with additional value (1 sequential color and distinct lightness) and quantitative range (neutral colors)
Warning

Not available yet!

Quantitative Ranges with Semantic Colors

If semantic colors are used for the quantitative ranges, use the neutral color for the primary value.

Primary value @sapUiChartPaletteSemanticNeutralDark1
Quantitative range values @sapUiChartPaletteSemanticBadLight3 & @sapUiChartPaletteSemanticCriticalLight3 & @sapUiChartPaletteSemanticGoodLight3
Primary value (neutral color) and quantitative ranges (semantic colors)
Primary value (neutral color) and quantitative ranges (semantic colors)
Warning

Not available yet!

Never use “good”, “critical” or “bad” colors for the primary values if semantic colors are also used for qualitative ranges.

Don't
Primary value (semantic colors) and quantitative range (semantic colors)
Primary value (semantic colors) and quantitative range (semantic colors)