Intro

The comparison micro chart is a bar chart. It compares entries in a top N list. Depending on the width of the parent container, it can have two different layouts: normal view and wide view. You can use either the semantic chart palette or the qualitative chart palette.

Comparison micro charts in normal view
Comparison micro charts in normal view
Comparison micro charts in wide view
Comparison micro charts in wide view

Usage

The comparison micro chart can be embedded into a table, list, tile, or header.

Responsiveness and Adaptiveness

The comparison 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.

Comparison micro chart with 3 bars - Size L
Comparison micro chart with 3 bars - Size L
Comparison micro chart with 3 bars - Size M
Comparison micro chart with 3 bars - Size M
Comparison micro chart with 3 bars - Size S
Comparison micro chart with 3 bars - Size S
Comparison micro chart with 3 bars - Size XS
Comparison micro chart with 3 bars - Size XS

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

Comparison micro chart with 3 bars in XS size in the grid table
Comparison micro chart with 3 bars in XS size in the grid table

Maximum and Minimum Sizes

The comparison micro chart can have a maximum width of 320 px. The minimum width is 64 px.

In normal view, the labels for the bars are positioned on top of each bar.

If the chart width exceeds 192 px, the chart goes into wide view and the labels for the bars are positioned on both sides of the bar.

If the chart width is 96 px or less, the labels are hidden.

Comparison micro chart with 3 bars and labels on both sides
Comparison micro chart with 3 bars and labels on both sides
Comparison micro chart with 3 bars and labels above
Comparison micro chart with 3 bars and labels above
Comparison micro chart with 3 bars without labels
Comparison micro chart with 3 bars without labels

Guidelines

  • Use a maximum of 12 bars in a single comparison micro chart.
  • We strongly recommended using at least 2 bars in a single chart to visualize a comparison.
  • When embedding comparison charts in tables, use the same number of bars for all the charts in a given table column. This makes the data comparable and avoids misleading the user. Use a suitable column header to describe the embedded charts.
Do
Use comparison charts with the same number of bars in a table column
Use comparison charts with the same number of bars in a table column
Don't
Do not use comparison charts with different numbers of bars in the same table column
Do not use comparison charts with different numbers of bars in the same table column

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