Donut

Donut chart

Each row is a slice. The slices start at the top and go clockwise, in the order of the table. The names are shown in a legend under the ring.

<figure data-chart="donut">
	<figcaption><b>Where the crop went</b><br><span>thousands of apples</span></figcaption>
	<table>
		<tbody>
			<tr><th>Juiced</th><td>38.2</td></tr>
			<tr><th>Eaten fresh</th><td>18.1</td></tr>
			<tr><th>Sold whole</th><td>12.4</td></tr>
			<tr><th>Composted</th><td>5.8</td></tr>
		</tbody>
	</table>
</figure>

The number in the middle

If a row has data-kind="total", its value is shown in the middle, and it is not a slice. If there is no total row, the middle shows the sum of the slices.

Screen readers read the table, not the middle of the ring. So if there is no total row, Tablechart adds a hidden row to the bottom of the table with the sum, named "Total". To use another name, set the totallabel option. With data-chart-keys, the name gets a translation key that ends in -total.

<figure data-chart="donut">
	<table>
		<tbody>
			<tr data-kind="total"><th>Picked</th><td>74.5</td></tr>
			<tr><th>Juiced</th><td>38.2</td></tr>
			<tr><th>Eaten fresh</th><td>18.1</td></tr>
			<tr><th>Sold whole</th><td>12.4</td></tr>
			<tr><th>Composted</th><td>5.8</td></tr>
		</tbody>
	</table>
</figure>

A sweep, step by step

With data-chart-animate="sweep" and steps, the slices of one step start together, at the same speed. Slices of one step that are next to each other sweep as one. Here the first and third slice are there from the start, and the other two arrive together on the next step, with the same data-fragment-index. See Step by step and Grow or sweep. This example is slower, so you can follow it.

.slow-sweep {
	--tablechart-animation-element-duration: 1.5s;
}

<figure class="slow-sweep" data-chart="donut" data-chart-animate="sweep">
	<table>
		<tbody>
			<tr><th>Elstar</th><td>42</td></tr>
			<tr data-fragment data-fragment-index="1"><th>Jonagold</th><td>28</td></tr>
			<tr><th>Braeburn</th><td>18</td></tr>
			<tr data-fragment data-fragment-index="1"><th>Gala</th><td>12</td></tr>
		</tbody>
	</table>
</figure>

Next

By default, all slices use one colour, each one a bit lighter. To set a colour for each slice, see Colours.