Stacked Bar Chart

New in Atfinity 17.

The <stackedBarChart> tag shows what each category is made of by stacking the series on top of each other. It accepts everything <barChart> accepts and only differs in that the series are stacked rather than placed side by side.

See Charts for the data model, sizing and the attributes shared by all charts.

Example

<stackedBarChart width="16cm" height="7cm" showValues="true" legend="bottom">
  <valueAxis label="Cases"/>
  <categoryAxis label="Quarter"/>
  {% for segment in segments %}
  <series label="{{ segment.name }}">
    {% for quarter in quarters %}
    <point label="{{ quarter.name }}" value="{{ segment.by_quarter[quarter.key] }}"/>
    {% endfor %}
  </series>
  {% endfor %}
</stackedBarChart>

Add stackMode="percentage" to show shares instead of amounts, with every column at full height.

Attributes

<stackedBarChart>

stackMode (optional) \ absolute stacks the real values, percentage normalises every column to 100%. Defaults to absolute. In percentage mode the value axis is fixed to 0 to 100 and gets a % suffix.

orientation (optional) \ vertical or horizontal. Defaults to vertical.

showValues (optional) \ true writes the value inside each segment, centred. Segments that are too small for their text are left unlabelled, so a 1% segment does not overflow into its neighbours.

All other attributes, and the <valueAxis>, <categoryAxis>, <series> and <point> children, are the same as for <barChart>.

Notes

Series are stacked bottom to top in the order they appear in the document, and the legend follows the same order.

maxSeries collects the smallest series into one grey Other series, which is always the top of the stack. maxCategories collects the remaining categories into one Other category, summed per series, so that every column keeps a consistent set of segments.

Negative values are not supported in a stacked chart. Use <barChart> for data that can go below zero.