The stacked bar micro chart is designed to be embedded into a list, table, or object page header as a way to represent related values atop one another in order to visualize the singular values as part of a whole. These values can be displayed in two different ways:

• Percentage compared to 100%

  Use „% values“ if your goal is to see the composition in percentage of each value of the whole. By doing so, the sum of the bars will always be 100%.

• Values compared to a maximum value

  Use „Values compared to a max value“ in list or table if your goal is to compare the sum of values to a maximum (for example, the maximum of all data shown in the list or table), whilst still displaying the relative value of each to its local maximum.

Please note: The stacked bar micro chart does not support negative values.

Usage

The stacked bar micro chart can be used in the following ways.

List or Table

The micro stacked chart can be embedded in a table with all the functionalities and options mentioned above.

Header

The micro stacked chart can be embedded in an object page header with all the functionalities and options mentioned above.

Please consider using a Harvey Ball micro chart as alternative visualization to show a part to whole representation.

Tile

The micro stacked chart is not designed to be embedded into an SAP Fiori tile and is therefore not supported. Please consider to use a Harvey Ball micro chart as alternative visualization to show a part to whole representation.

Components

Maximum Value

The chart is scaled relative to the maximum value. This means if a maximum value (maxValue) is set, then the width of the stacked chart represents the maximum value and each value within the chart is scaled relative to this maximum.

If the maximum value is not set, then the width of the chart represents 100% and each value is displayed as a relative percentage.

Precision

By setting a specific value for the precision, an application developer can influence rounding calculations by defining how many digits are displayed. By default this value is 1.

Display Value

Besides the displayed default %-values of the bars, an application developer can set a specific display value to enable the display of absolute values. If the intention is to show bars only, please put a a blank space here.

Color

An application developer can set any color for the chart either by using names of semantic colors ( for example, “red” for negative values or “green” for positive values) or by using names from the qualitative palette (sapUiChartPaletteQualitativeHue1…11).

Please note: A legend is currently not available for the stacked bar micro chart and since the use of multiple colors is not self-explanatory, we highly recommend using semantic colors and explanatory title related to the chart.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.