Styling

Default

If no variables are set, a chart uses the text colour of the page. Donut slices and lines get lighter one by one. All text uses the font of the page.

<figure data-chart="waterfall">
	<figcaption><b>Nothing set</b></figcaption>
	<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>

Where to set it

Charts are styled with CSS variables. To style every chart on a page, set them on :root. To style one chart, or the charts in one part of the page, set them on a class.

:root {
	--tablechart-bar-color: #e4572e;
}
.highlight {
	--tablechart-bar-color: #f2b134;
}

A variable can also be set on the chart itself, with style.

<figure data-chart="column" style="--tablechart-bar-color: #e4572e"></figure>

Make one bar stand out

A class on a row of the table is copied to everything drawn for that row: its bar, its number and its name. Use it to give one bar its own colour, and its number its own font. The font here is Roboto Slab, from Google Fonts.

.granny {
	--tablechart-bar-color: #7fb03f;
	--tablechart-value-color: #5d8a2b;
}
.tablechart-value.granny {
	font-family: "Roboto Slab", Rockwell, serif;
	font-weight: 400;
	font-size: 2.2em;
}

<figure data-chart="column">
	<figcaption><b>Apples sold by variety</b><br><span>thousands</span></figcaption>
	<table>
		<tbody>
			<tr><th>Elstar</th><td>128</td></tr>
			<tr class="granny"><th>Granny Johnson</th><td>45</td></tr>
			<tr><th>Jonagold</th><td>135</td></tr>
			<tr><th>Braeburn</th><td>121</td></tr>
		</tbody>
	</table>
</figure>

The class is also copied to the slice and the legend name of a donut, and to the bar of a bar chart or a waterfall.

The pages in this section

• Colours: one colour for all bars, colours for a waterfall, and a palette.
• Background: the colour that text inside bars uses.
• Text: the sizes of the text in a chart.
• Lines and marks: the baseline, connectors, the badge and the bar width.
• Animation: how fast a chart builds.
• All variables.