Pie Chart

New in Atfinity 17.

The <pieChart> tag shows how a total is split between categories. Setting innerRadius turns it into a donut, which is how the charts on insights pages look.

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

Example

<pieChart width="16cm" height="7cm" innerRadius="60%" valueType="amountPercentage" maxSlices="6">
  {% for group in cases|groupby('status') %}
  <slice label="{{ group.grouper }}" value="{{ group.list|length }}"/>
  {% endfor %}
</pieChart>

Attributes

<pieChart>

innerRadius (optional) \ Radius of the hole as a percentage of the chart radius, e.g. innerRadius="60%". Without it the chart is a full pie.

labels (optional) \ What to write next to each slice: none, label, value, percentage, labelValue or labelPercentage. Defaults to none, which leaves the legend to carry the text.

labelPosition (optional) \ outside or inside. Defaults to outside.

startAngle (optional) \ Angle of the first slice in degrees, -360 to 360. Defaults to 90, which starts at the top.

direction (optional) \ clockwise or anticlockwise. Defaults to clockwise.

maxSlices (optional) \ Maximum number of slices, 1 to 24. Defaults to 6. Everything beyond it is added up into one Other slice, which is always drawn last and in grey.

otherColor (optional) \ Colour of the Other slice. Defaults to a light grey.

<slice>

label \ Text of the slice, used for labels and the legend.

value \ The value of the slice. An empty value counts as 0.

color (optional) \ Overrides the colour from the palette, e.g. color="hex(0x186C95)".

popout (optional) \ Distance in pt by which the slice is pulled out of the pie, e.g. popout="8". Ignored on donuts.

Notes

Percentages are always calculated over the full total, including the values collected in the Other slice.

Donuts draw their labels around the outside of the ring. If labels collide, reduce fontSize, raise minLabelPercentage or switch to legend="right" and labels="none".