UI Elements - SAPUI5 Data Visualization Micro Chart Stacked Bar Micro Chart

Updated: July 9, 2019
SAPUI Version 1.124

Stacked Bar Micro Chart

sap.suite.ui.microchart.StackedBarMicroChart

Intro

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 single values as part of a whole. These values can be displayed in two different ways:

  • Percentage compared to 100%

    Use percentage values if your goal is to see each value in the composition as a percentage of the whole. In this case, the sum of the bars is always 100%.

Percentage values (without labels)
Percentage values (without labels)

  • Values compared to a maximum value

    Use this option in a list or table if your goal is to compare the sum of the values to a maximum value (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.

Absolute values (without labels)
Absolute values (without labels)

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

Usage

Use the stacked bar micro chart if:

  • You want to visualize a part-to-whole relationship embedded in a list or table, with all the features described above.
Chart embedded in a table - Percentage values (without labels)
Chart embedded in a table - Percentage values (without labels)
Chart embedded in a table - Absolute values (without labels)
Chart embedded in a table - Absolute values (without labels)
  • You want to visualize a part-to-whole relationship in an object page header, with all the features described above.

Also consider using a Harvey Ball micro chart as an alternative visualization for a part-to-whole relationship.

Chart embedded in an object header - Percentage values (with labels)
Chart embedded in an object header - Percentage values (with labels)
Chart embedded in an object header - Absolute values (with labels)
Chart embedded in an object header - Absolute values (with labels)

Do not use the stacked bar micro chart if:

  • You want to visualize a part-to-whole relationship on a SAP Fiori tile. The stacked bar micro chart is not designed to be embedded into an SAP Fiori tile and is therefore not supported. Consider using a Harvey Ball micro chart instead.


Responsiveness

The stacked bar micro chart is fully responsive. The size adjusts dynamically based on the dimensions of the parent container. In addition, there are also four fixed sizes – L, M, S and XS. Each fixed size is a snapshot of the fully responsive micro chart for specific dimensions.

Stacked bar micro chart - Size L
Stacked bar micro chart - Size L
Stacked bar micro chart - Size M
Stacked bar micro chart - Size M
Stacked bar micro chart - Size S
Stacked bar micro chart - Size S
Stacked bar micro chart - Size XS
Stacked bar micro chart - Size XS

You can use the smallest XS size to embed the stacked bar micro chart in the table cells of the grid table, analytical table, or tree table (also in condensed mode). Left-align the stacked bar micro chart in the table cell.

Stacked bar micro chart in XS size in the grid table
Stacked bar micro chart in XS size in the grid table

Maximum and Minimum Sizes

The stacked bar micro chart can have the following dimensions:

Width Height
Maximum 320 px 94 px
Minimum 64 px 18 px

If the label is too long to fit inside the bar, it is hidden. With the minimum chart height, the labels are not shown.

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

By default, the control displays percentage values on the bars. However, application developers can also set a display property to show absolute values, or to show only bars (by entering a blank space).

Color

An application developer can set any color for the chart either by using names of semantic colors, or by using names from the qualitative palette (sapUiChartPaletteQualitativeHue1…11).

Please note: A legend is currently not available for the stacked bar micro chart. Since the use of multiple colors is not self-explanatory, we highly recommend using semantic colors and an explanatory title for 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.

Elements and Controls

Implementation