X-Donut

Press allows generation of donut and pie charts. This is currently available through the experimental <x-donut> tag. Let's take a look at an example <x-donut> element:

For example

<x-donut stroke="12pt" width="128pt" height="128pt">
	<data>
		<item color="red" value="1" />
		<item color="green" value="1" />
		<item color="blue" value="1" />
	</data>
</x-donut>

Inputs to x-donut

Donut charts are customisable in Press. The have the following attributes:

x-donut

• stroke: a number that equals the stroke of the donut plot. Leave undefined to render a pie chart
• width/height/diameter: the dimensions of the donut plot

If we remove the stroke from the payload above, we get a pie chart:

<x-donut width="128pt" height="128pt">
	<data>
		<item color="red" value="1" />
		<item color="green" value="1" />
		<item color="blue" value="1" />
	</data>
</x-donut>

x-donut takes a single child, a <data> tag.

x-donut/data

<data> is where we set limits and properties for the data space we're using. By default, the limit is pulled from the <item> children of data, but we can easily override the limit of data. This is useful for rendering e.g., a radial progress bar. <data> has the following properties:

• limit: specify the total value bound of all data that corresponds to 360 degree rotation
• limit-color: if the items in data do not reach the limit, we color the remaining space with limit-color

Let's look at setting limits in <data>:

<x-donut stroke="12pt" width="128pt" height="128pt">
	<data limit="4">
		<item color="red" value="1" />
		<item color="green" value="1" />
		<item color="blue" value="1" />
	</data>
</x-donut>

With the limit in place, we now have an incomplete donut plot. Let's change the colors and render a donut plot which is useful:

<x-donut stroke="12pt" width="128pt" height="128pt">
	<data limit="100" limit-color="#7E30F755">
		<item color="#7E30F7" value="75" />
	</data>
</x-donut>

Now we're getting somewhere, let's wrap it in a frame and render the actual value here:

<frame v-align="center" h-align="center">
	<x-donut top="0" stroke="12pt" width="128pt" height="128pt">
		<data limit="100" limit-color="#7E30F755">
			<item color="#7E30F7" value="75" />
		</data>
	</x-donut>
	<frame font-size="24pt"><b>75%</b></frame>
</frame>

75%

x-donut/data/items

The <data> tag inside <x-donut> allows any amount of <item> children. Item only has two attributes:

• color: the color to render this specific item
• value: how much space in the donut plot this item takes up, proportional to the greater of the limit set on <data>, or the sum of all <item> tag values.