Lines and marks

The baseline, connectors, the badge and the bar width.

Baseline and connectors

The baseline and the connectors between waterfall steps each have a colour, width and opacity. --tablechart-connector-dash sets the dashes.

CSS 
.dotty {
	--tablechart-connector-width: 2.5px;
	--tablechart-connector-dash: 0 6;
	--tablechart-connector-opacity: 1;
	--tablechart-baseline-width: 2px;
	--tablechart-baseline-opacity: 1;
}
/* A dash of 0 with round ends is a dot. */
.dotty .tablechart-connector {
	stroke-linecap: round;
}
Picked 74.5
Windfalls 28.2
Bruised -16.1
Peelings -13.3
Pressed 73.3
HTML 
<figure class="dotty" 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>

The badge

The badge of a bracket or trend arrow is an ellipse by default. These variables set its corners, padding and background.

CSS 
.pill {
	--tablechart-badge-radius: 0.4em;
	--tablechart-badge-padding: 0.4em 0.8em;
}
Last season 251.5
This season 279.6
+11%
HTML 
<figure class="pill" data-chart="column">
	<table>
		<tbody>
			<tr><th>Last season</th><td>251.5</td></tr>
			<tr><th>This season</th><td>279.6</td></tr>
		</tbody>
	</table>
	<div class="chart-annotations"><span data-annotation="bracket">+11%</span></div>
</figure>

Bar width

A bar is never wider than --tablechart-bar-max: 60px by default. Use px, % of the chart width, em or rem. Set it to none for no maximum.

Spring 58
Summer 72
Autumn 70
Winter 91
HTML 
<figure data-chart="column" style="--tablechart-bar-max: 24px">
	<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>91</td></tr>
		</tbody>
	</table>
</figure>
Variable Sets
--tablechart-baseline-color / -width / -opacity The baseline
--tablechart-connector-color / -width / -dash / -opacity The connectors between waterfall steps
--tablechart-leader-color / -width / -opacity The line from a donut slice to its number
--tablechart-annotation-color / -width The lines and arrowheads of annotations
--tablechart-break-color / -width / -opacity The lines of a break in the scale
--tablechart-badge-surface / -padding / -radius / -border-width The badge
--tablechart-slice-gap The gap between donut slices, in the units of the plot: 4 by default
--tablechart-bar-max The widest a bar may be: 60px by default