Step by step

Steps

Add data-fragment to the figure. The chart then starts empty, and each step shows one more row. Tablechart puts a Previous and a Next button under the chart.

<figure data-chart="column" data-fragment="">
	<table>
		<tbody>
			<tr><th>Spring</th><td>58</td></tr>
			<tr><th>Summer</th><td>72</td></tr>
			<tr><th>Autumn</th><td>70</td></tr>
			<tr><th>Winter</th><td>41</td></tr>
		</tbody>
	</table>
</figure>

The table stays complete, so screen readers read every row, whatever step the chart is at. Without animation, or on paper, a chart shows all its steps at once.

Rows that are there from the start

Add data-fragment to some rows instead of the figure. Rows without it are there from the start, and the others arrive one step each.

<figure data-chart="waterfall">
	<table>
		<tbody>
			<tr data-kind="total"><th>Picked</th><td>74.5</td></tr>
			<tr data-fragment=""><th>Windfalls</th><td>28.2</td></tr>
			<tr data-fragment=""><th>Bruised</th><td>-16.1</td></tr>
			<tr data-fragment=""><th>Peelings</th><td>-13.3</td></tr>
			<tr data-kind="total"><th>Pressed</th><td>73.3</td></tr>
		</tbody>
	</table>
</figure>

Several rows on one step

Rows with the same data-fragment-index arrive on the same step.

<figure data-chart="column">
	<table>
		<tbody>
			<tr data-fragment data-fragment-index="1"><th>North</th><td>58</td></tr>
			<tr data-fragment data-fragment-index="1"><th>South</th><td>72</td></tr>
			<tr data-fragment data-fragment-index="2"><th>East</th><td>70</td></tr>
			<tr data-fragment data-fragment-index="2"><th>West</th><td>41</td></tr>
		</tbody>
	</table>
</figure>

A column on its own step

On a chart with several value columns, add data-fragment to a column header. That column arrives whole, on a step of its own. An annotation can have data-fragment too; otherwise it arrives with the rows it is about.

<figure data-chart="line">
	<table>
		<thead>
			<tr><th></th><th>North</th><th data-fragment>South</th></tr>
		</thead>
		<tbody>
			<tr><th>2022</th><td>58</td><td>41</td></tr>
			<tr><th>2023</th><td>72</td><td>50</td></tr>
			<tr><th>2024</th><td>70</td><td>63</td></tr>
			<tr><th>2025</th><td>81</td><td>70</td></tr>
		</tbody>
	</table>
</figure>

Point by point

Add data-fragment to cells. Each cell arrives on a step of its own, and cells without it are there from the start. The steps go down each column of the table: one line point by point, then the next.

<figure data-chart="line">
	<table>
		<thead>
			<tr><th></th><th>North</th><th>South</th></tr>
		</thead>
		<tbody>
			<tr><th>2022</th><td data-fragment>58</td><td data-fragment>41</td></tr>
			<tr><th>2023</th><td data-fragment>72</td><td data-fragment>50</td></tr>
			<tr><th>2024</th><td data-fragment>70</td><td data-fragment>63</td></tr>
			<tr><th>2025</th><td data-fragment>81</td><td data-fragment>70</td></tr>
		</tbody>
	</table>
</figure>

This works on any chart with several value columns. Grouped columns and bars arrive one at a time, and a stack is built piece by piece: first the bottom layer, then the next layer on top. The total above a stack arrives with its last piece. For another order, give the cells a data-fragment-index.

<figure data-chart="column" data-chart-stack>
	<table>
		<thead>
			<tr><th></th><th>Farm shop</th><th>Market</th></tr>
		</thead>
		<tbody>
			<tr><th>2023</th><td data-fragment>64</td><td data-fragment>38</td></tr>
			<tr><th>2024</th><td data-fragment>71</td><td data-fragment>45</td></tr>
			<tr><th>2025</th><td data-fragment>69</td><td data-fragment>57</td></tr>
		</tbody>
	</table>
</figure>

Your own buttons

Set the controls option to false to leave the buttons out, and step the chart from your own script. Each chart has next(), previous() and stepTo(step), and step and steps say where it is. The figure sends a tablechart:step event at each step.

const { charts } = await init({ controls: false });
const chart = charts[0];

document.querySelector("#more").addEventListener("click", () => chart.next());
chart.figure.addEventListener("tablechart:step", (event) => {
	console.log(`Step ${event.detail.step} of ${event.detail.steps}`);
});

Change the buttons

The buttons are in a div with the class tablechart-controls, under the chart. Each button has an icon, .tablechart-control-icon, and a text, .tablechart-control-label, so either can be changed or hidden with CSS.

For only icons, at the sides of the chart and in the middle of it, as on a carousel, place the buttons over the chart and hide the text from sight. Screen readers still read it.

.carousel {
	padding-inline: 2.5em;
}
.carousel .tablechart-controls {
	position: absolute;
	inset: 0;
	margin: 0;
	align-items: center;
	pointer-events: none;
}
.carousel .tablechart-controls button {
	pointer-events: auto;
	border-radius: 50%;
	padding: 0.5em;
}
.carousel .tablechart-control-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

<figure class="carousel" data-chart="column" data-fragment="">
	<table>
		<tbody>
			<tr><th>Spring</th><td>58</td></tr>
			<tr><th>Summer</th><td>72</td></tr>
			<tr><th>Autumn</th><td>70</td></tr>
			<tr><th>Winter</th><td>41</td></tr>
		</tbody>
	</table>
</figure>

The text of the buttons

The previouslabel and nextlabel options set the text: "Previous" and "Next" by default. Screen readers also hear the stephint text after each one, "step of the chart" by default, so they know a button changes only the chart and not the table. With data-chart-keys on the figure, the texts get translation keys too, such as harvest-previous, harvest-next and harvest-step. See Translation.

In a presentation

In reveal.js-tablechart, Reveal's fragments step the chart, so the same data-fragment works there, and the chart has no buttons of its own.