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.

Usage

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

Responsiveness

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.

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

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.

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.

Resources

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