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.

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.

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

Maximum and Minimum Sizes

The column micro chart can have the following dimensions:

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