Animation

Speed

Each element takes --tablechart-animation-element-duration, the next one starts after --tablechart-animation-stagger of that time, and if the whole chart would take longer than --tablechart-animation-max, the starts move closer together.

.slow {
	--tablechart-animation-element-duration: 0.9s;
	--tablechart-animation-stagger: 0.5;
}

<figure class="slow" data-chart="column">
	<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>

These are CSS variables, so they can be set on a chart, a section or a whole page. Set on a section, the maximum holds for each chart in it.

Waterfalls

A waterfall grows column by column, like a column chart, but its stagger is 0.6 by default: each column starts when the one before it is nearly done, so they come one after the other without a pause. Its connector draws as the next column starts. If the whole chart would take longer than the maximum, the columns get shorter, so they keep coming one after the other.

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

With a lower stagger, the columns overlap more. At 1, each column waits until the one before it is finished.

.overlap {
	--tablechart-animation-stagger: 0.25;
}

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

To build a waterfall at one speed instead, see Grow or sweep.

Donuts

A donut slice is one element, like a bar: it takes the element time, and the next slice starts after the stagger. So a big slice turns faster than a small one.

<figure data-chart="donut">
	<table>
		<tbody>
			<tr><th>Elstar</th><td>42</td></tr>
			<tr><th>Jonagold</th><td>28</td></tr>
			<tr><th>Braeburn</th><td>18</td></tr>
			<tr><th>Gala</th><td>12</td></tr>
		</tbody>
	</table>
</figure>

With a stagger of 1, each slice starts when the one before it is finished.

.together {
	--tablechart-animation-stagger: 1;
}

<figure class="together" data-chart="donut">
	<table>
		<tbody>
			<tr><th>Elstar</th><td>42</td></tr>
			<tr><th>Jonagold</th><td>28</td></tr>
			<tr><th>Braeburn</th><td>18</td></tr>
			<tr><th>Gala</th><td>12</td></tr>
		</tbody>
	</table>
</figure>

To draw the ring in one sweep instead, see Grow or sweep.

Grow or sweep

data-chart-animate on a figure sets how the chart builds:

Lines

A line sweeps from left to right by default. With grow, it grows from zero as a whole, also below zero. The points move with the line, and the numbers appear when it is done.

<figure data-chart="line" data-chart-shape="smooth">
	<figcaption><b>Sweep</b></figcaption>
	<table>…</table>
</figure>

<figure data-chart="line" data-chart-shape="smooth" data-chart-animate="grow">
	<figcaption><b>Grow</b></figcaption>
	<table>…</table>
</figure>

Areas

An area works the same way. Stacked areas grow together.

<figure data-chart="area" data-chart-stack data-chart-shape="smooth" data-chart-legend>
	<figcaption><b>Sweep</b></figcaption>
	<table>…</table>
</figure>

<figure data-chart="area" data-chart-stack data-chart-shape="smooth" data-chart-animate="grow" data-chart-legend>
	<figcaption><b>Grow</b></figcaption>
	<table>…</table>
</figure>

Donuts

A donut grows slice by slice by default. With sweep, the ring is drawn in one movement at one speed, and the last slice slows to a stop. It takes as long as the slices would take one after the other.

<figure data-chart="donut">
	<figcaption><b>Grow</b></figcaption>
	<table>…</table>
</figure>

<figure data-chart="donut" data-chart-animate="sweep">
	<figcaption><b>Sweep</b></figcaption>
	<table>…</table>
</figure>

Waterfalls

A waterfall grows column by column by default, each column eased. With sweep, it builds at one speed: only the last one slows to a stop. The difference is small: in the Grow example every column has easing; in the Sweep example the columns grow at an even speed, and only the last one slows down. Both examples are slower than the default, so this is easier to see.

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

<figure class="slow-waterfall" data-chart="waterfall">
	<figcaption><b>Grow</b></figcaption>
	<table>…</table>
</figure>

<figure class="slow-waterfall" data-chart="waterfall" data-chart-animate="sweep">
	<figcaption><b>Sweep</b></figcaption>
	<table>…</table>
</figure>

To set it for every chart, use the animate option. Then data-chart-animate on a figure sets it for that one chart. A line or area with triggered steps (like from Reveal.js fragments) always sweeps.

init({ animate: "grow" });

No animation

To show a chart without animation, add data-chart-animate="false" to the figure. The chart is then on the page from the start, also when it is not in view. To do this for every chart, set the animate option to false. If the visitor prefers reduced motion, charts build without animation anyway.

<figure data-chart="column" data-chart-animate="false">

init({ animate: false });