100% stacked bar

Composition as percentage. It sits in the Comparison group of the widget library.

When to use it#

Use a 100% stacked bar to compare the mix of parts when totals differ: the share of spending by category each month, or the split of income sources per quarter. Every bar is the same length, so only proportions matter.

When to pick something else#

• The totals matter too? Use a Stacked bar.
• One category's mix at a single moment? Use a Donut chart or Pie chart.
• Tracking shares over many dates? Use a Stacked area.

The data it needs#

Pick these in the Data tab of the inspector. BankSync suggests a column for each when your source has an obvious match.

Rows that share a category are combined before drawing: choose Sum, Average, Count, Min or Max on the value field. See Binding data.

100% stacked bar options#

This chart has no options of its own; everything on its Style tab is the shared chart styling below.

Shared chart styling#

Every chart also has the shared styling options. These apply to this one:

• Legend: position, layout and which series show.
• Axes: titles, tick labels and number format.
• Grid, title, padding and background.
• Value labels on the marks.
• Categories and labels: top N with "Other", sort order, readable labels, the handwritten callout.
• Style: corner radius, line width, opacity and animation.
• Tooltip on hover.
• Click to filter: clicking a mark can filter the rest of the dashboard. See Filters and cross-filtering.
• Colours: follow the dashboard palette or pick one for this chart.

Messy data#

• Each part is shown as its share of the bar; the tooltip gives both the amount and the percentage.
• When any value is negative the axis runs from -100% to 100%, with negative parts to the left of or below zero. Mixing refunds into spending shares can mislead; filter them out first.
• Without a series field it draws ordinary bars of the amounts, not shares; bind a series to get the 100% split.
• More than 8 series: the 7 largest keep their colour and the rest merge into Other.

On a phone#

It holds up at phone width because all bars share one scale. The legend moves below the chart and may be cut to "+N more"; keep phone versions to about four parts.

Related charts#

• Bar chart: Horizontal categorical bars
• Column chart: Vertical categorical bars
• Grouped bar: Side-by-side bars per series
• Stacked bar: Composition per category
• Lollipop: Bars with circle endpoints
• Dot plot: Discrete category dots
• Bullet chart: Single value with target bands