Background

What uses the background colour

--tablechart-surface is the background colour of a chart. Each line after the first is lighter than the one before it, and so is each donut slice. The lighter colour is the line or slice colour mixed with --tablechart-surface.

If you set a colour for each line or slice with a palette, the background colour is not used.

These parts are cut out of the chart, so they show the real background. You do not need to set anything for them:

• the inside of open points on a line;
• the badge of a bracket or trend arrow;
• the gaps between donut slices;
• the break in a scale.

Set it

By default, --tablechart-surface is the background the browser uses for the page: white in light mode and dark in dark mode. See Light and dark. If your page or a part of it has another background, set --tablechart-surface to that colour.

.dark {
	background: #16323f;
	color: #f3efe9;
	padding: 1em;
	--tablechart-surface: #16323f;
	--tablechart-slice-color: #f3efe9;
}

<figure class="dark" data-chart="donut">
	<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>