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.
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.
- 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.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.