Intro

The value-based legend is used to visually represent value ranges through color shades. It is currently available for the heatmap and treemap.

Value-based legend example on a heatmap

Value-based legend example on a heatmap

Layout and Responsiveness

By default, the value-based legend is positioned to the right of the data plot. If there isn’t enough space (for example, in portrait mode on a smartphone), it moves to the bottom. In this case, it is displayed in a condensed format.

Responsiveness on a smartphone - Portrait mode

Responsiveness on a smartphone - Portrait mode

Behavior

The default value-based legend comprises five segments and uses the first hue of the sequential color palette.

Default value-based legend

Default value-based legend

Customization

Number of Segments

You can change the number of segments from two to nine. The corresponding value ranges are automatically calculated and assigned to each shade. However, you need to assign the colors to the segments yourself.

Recommended sequential value-based legend from two to nine items

Recommended sequential value-based legend from two to nine items

<div> <div></div> <div>Color Name</div> </div> <div> <div><strong>2 values</strong></div> <div>sapUiChartPaletteSequentialHue1Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1</div> </div> <div> <div><strong>3 values</strong></div> <div>sapUiChartPaletteSequentialHue1Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark2</div> </div> <div> <div><strong>4 values</strong></div> <div>sapUiChartPaletteSequentialHue1Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark1</div> </div> <div> <div><strong>5 values</strong></div> <div>sapUiChartPaletteSequentialHue1Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark2</div> </div> <div> <div><strong>6 values</strong></div> <div>sapUiChartPaletteSequentialHue1Light3</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark2</div> </div> <div> <div><strong>7 values</strong></div> <div>sapUiChartPaletteSequentialHue1Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2</div> </div> <div> <div><strong>8 values</strong></div> <div>sapUiChartPaletteSequentialHue1Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2Dark1</div> </div> <div> <div><strong>9 values</strong></div> <div>sapUiChartPaletteSequentialHue1Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue1Dark2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2Light2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2</div> </div> <div> <div></div> <div>sapUiChartPaletteSequentialHue2Dark1</div> </div>

Example of a heatmap with an 5-segment sequential value-based legend

Example of a heatmap with an 5-segment sequential value-based legend

When you use the sequential color palette, you can also change the recommended hue illustrated above (still based on the SAP Fiori chart color palette). If you do so, follow this example for the choice of shades.

Recommended semantic value-based legend from two to nine items

Recommended semantic value-based legend from two to nine items

<div> <div></div> <div>Color Name</div> </div> <div> <div><strong>2 values</strong></div> <div>sapUiChartPaletteSemanticGoodLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGood</div> </div> <div> <div><strong>3 values</strong></div> <div>sapUiChartPaletteSemanticGoodLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGood</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark2</div> </div> <div> <div><strong>4 values</strong></div> <div>sapUiChartPaletteSemanticGoodLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGood1Light1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGood</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark1</div> </div> <div> <div><strong>5 values</strong></div> <div>sapUiChartPaletteSemanticGoodLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodLight1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGood</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark2</div> </div> <div> <div><strong>6 values</strong></div> <div>sapUiChartPaletteSemanticGoodLight3</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodLight1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGood</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark2</div> </div> <div> <div><strong>7 values</strong></div> <div>sapUiChartPaletteSemanticGoodLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodLight1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodHue1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBadLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBadLight1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBad</div> </div> <div> <div><strong>8 values</strong></div> <div>sapUiChartPaletteSemanticGoodLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodLight1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGood</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBadLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBadLight1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBad</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBadDark1</div> </div> <div> <div><strong>9 values</strong></div> <div>sapUiChartPaletteSemanticGoodLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodLight1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGood</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticGoodDark2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBadLight2</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBadLight1</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBad</div> </div> <div> <div></div> <div>sapUiChartPaletteSemanticBadDark1</div> </div>

Example of a heatmap with an 5-segment semantic value-based legend

Example of a heatmap with an 5-segment semantic value-based legend

Range

Finally, you can manually set the range for each segment. Note that for a given segment number, “segment number + 1” values are needed (example: [0,8,9,10,11,20] for five segments).

If the overall range being defined is different from the real data range, the “>” and “<” signs are displayed in the legend.

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.

Visual Design