Bar Chart

Info

New in Atfinity 17.

The <barChart> tag compares values across categories. With several <series> the bars of each category are drawn side by side. To stack them instead, use <stackedBarChart>.

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

Example

<barChart width="16cm" height="6cm" showValues="true" categoryRotation="45" legend="none">
  <valueAxis min="0" max="100" step="25" suffix="%" label="Completion"/>
  <categoryAxis label="Onboarding step" maxLabelChars="16"/>
  {% for step in steps %}
  <bar label="{{ step.name }}" value="{{ step.completion }}"/>
  {% endfor %}
</barChart>

Attributes

<barChart>

orientation (optional)
vertical or horizontal. Defaults to vertical. Horizontal bars are easier to read when the category labels are long.

stacked (optional)
true stacks the series instead of placing them side by side. Defaults to false. <stackedBarChart> is the same thing with a clearer name.

color (optional)
A single colour for all bars, used when the chart has only one series, e.g. color="hex(0x186C95)".

barWidth (optional)
Maximum thickness of a single bar in pt. Defaults to 36. Bars never get wider than this, no matter how few categories there are.

barSpacing, groupSpacing (optional)
Space between the bars of one category and between the categories themselves.

showValues (optional)
true writes the value on every bar. Defaults to false.

valuePosition (optional)
outside, inside or none. Defaults to outside for plain bars. Labels that do not fit their bar are left out.

grid (optional)
none, horizontal, vertical or both. Defaults to horizontal. The lines always follow the value axis, so a horizontal chart draws them vertically.

gridColor, gridDash, axisColor (optional)
Appearance of the grid and the axis lines, e.g. gridDash="2 2".

categoryRotation (optional)
Rotates the category labels by this many degrees, -90 to 90. Space for them is reserved automatically.

maxCategories (optional)
Maximum number of categories, 1 to 50. Defaults to 12. The rest is added up into one Other category, per series, so every column stays consistent.

maxSeries (optional)
Maximum number of series, 1 to 12. Defaults to 6. The rest is added up into one grey Other series.

<valueAxis> (optional)

min, max, step
Bounds and tick spacing of the value axis. All three accept auto, which is the default: the axis starts at zero and extends below it only when the data contains negative values.

suffix
Appended to every axis tick, e.g. suffix="%".

label
Title written along the axis.

<categoryAxis> (optional)

label
Title written under, or next to, the category axis.

rotation
Same as categoryRotation on the chart, and takes precedence over it.

maxLabelChars
Overrides maxLabelChars for the category labels only.

<series>

label
Name of the series, used in the legend. A series without a label is left out of the legend.

color (optional)
Overrides the colour from the palette.

<point> and <bar>

label
The category this value belongs to.

value
The value. An empty value counts as 0.

color (optional)
Overrides the colour for this bar.

Use <bar> directly inside <barChart> when there is only one set of values, and <point> inside a <series> when there are several. Mixing the two is an error.