Bars start at zero, stay no thicker than 24px and are rounded only at the end. Vertical bars are for trends and comparisons; horizontal bars are for rankings and lists.
A vertical bar card that starts at zero. Use it to compare sizes across periods or items by length.
Judgment built in (3)
Bars are read by length, so the vertical axis starts at zero. To follow the course of small changes, use a line card.
Bars are no thicker than 24px and the leftover width is left as space. Only the end is rounded; the base is flat, keeping the look of bars growing from the zero line.
The value is written only for the last bar, to the right of its end. A value on top of a narrow bar overlaps its neighbors. The other values are read by hovering or with the arrow keys.
Bar - Stacked
bar-stacked
A card that splits each bar into stacked segments per item. Use it to see the course of a total and its composition together.
Judgment built in (3)
The largest item goes at the bottom. Only a segment that starts at the zero line compares directly by length, so the most important item's course can be read.
Only the three largest items get a color; the rest fold into a gray Other. The rule matches KPI - Stacked Bar, so the same item gets the same color.
Segments are 2px apart so the colors do not blend, and the total is written to the right of the last bar and in the tooltip.
Bar - Stacked 100%
bar-stacked-100
A stacked bar card with every period scaled to 100%. Use it to see how the mix changes rather than the amounts.
Judgment built in (3)
Every bar is scaled to 100%, so only the change in shares shows even as the total rises and falls. To see the change in the total as well, use Bar - Stacked.
The largest item goes at the bottom. A bottom segment that starts at the zero line shows the rise and fall of its share directly.
The tooltip gives both the share and the amount, to tell whether a share grew because that item grew or because another shrank.
Bar - Target
bar-target
A card that marks each bar's target with a short horizontal line. Use it to see whether each period met a target that differs by period.
Judgment built in (3)
The target is a short horizontal line over the bar. Even when the target differs by period, the bar and its target are compared in the same place.
Periods that missed their target get a lighter bar, so attainment is read first. For a metric where lower is better, flip it with "better": "down".
The tooltip gives the target and the attainment rate together.
Bar - Diverging
bar-diverging
A card whose bars split above and below the zero line. Use it for signed values such as variance from target or change.
Judgment built in (3)
Only the zero line is solid, and bars grow up and down from it. Where the sign flips is read first.
The good side is green and the bad side red, the same colors as the KPI badge. For a metric where lower is better, flip the colors with "better": "down".
Values are written with their sign, and the last bar's value sits to the right of its end.
Horizontal bars
Rankings and lists · 3 cards
Bar - Ranking
bar-ranking
Horizontal bars with the name laid over the bar and the value on the right. Use it to see each item's size together with its rank.
Judgment built in (3)
Items are sorted from largest to smallest. Items with a set order, like age bands or ranges, keep the written order with "sort": false.
Up to five rows are shown and the rest fold into one 'Other (n)' row. Other has no bar, only its total, so the folded sum does not blur the ranking. Change the row count with max.
The name is laid over the bar, so the bars use the full width with no name column. The tooltip gives the share of the total.
Bar - Compare
bar-compare
A card with a vertical tick for the comparison value over each horizontal bar and a change badge on the right. Use it to compare each item's value with last year or last month.
Judgment built in (3)
The comparison value is a vertical tick, not a second bar. Whether the bar's end passed the tick tells at once whether the item grew or shrank.
The change badge is the same as the KPI cards': the arrow shows the direction and the color shows good or bad (better).
Sorting is by the current period's value. The folded Other row also gets a change, computed from the two totals.
Bar - Butterfly
bar-butterfly
A card with the item names in the middle and the two groups' bars spread left and right. Use it to compare two groups, like men and women or two regions, on the same items.
Both groups share one scale. The bars on both sides are sized to the single largest value, so left and right lengths compare directly.
Each item name is written once in the middle and the values sit in the outer cells. Ordered items like age bands keep the written order; "sort": true sorts by the sum of the two values.
The two groups are orange and pink-red, with each group's name at the top end of its bars. The tooltip gives both values, their total and the right-hand group's share.
