Axes and gridlines

The axes, the numbers and titles along them, and the gridlines.

Showing axes and gridlines

Axes and gridlines are not always shown by default. For all charts with a horizontal or vertical value axis, the main axis (the 'baseline') is always shown. You can see that in for example the column and line chart, it is at the bottom, in the bar chart it is at the left. But the value axis is not shown by default, unless the chart type really requires it, such as a scatter chart.

To turn the axes on, add data-chart-axis. To turn the grid on, add data-chart-grid. That works for every type except the donut.

To turn it on by default via the config, use the axis and grid options.

Rainfall at the orchard
Jan 84
Feb 71
Mar 76
Apr 58
May 61
Jun 47
Jul 39
Aug 52
HTML 
<figure data-chart="line" data-chart-axis data-chart-grid>
	<figcaption><b>Rainfall at the orchard</b></figcaption>
	<table>
		<tbody>
			<tr><th>Jan</th><td>84</td></tr>
			<tr><th>Feb</th><td>71</td></tr>
			<tr><th>Mar</th><td>76</td></tr>
			<tr><th>Apr</th><td>58</td></tr>
			<tr><th>May</th><td>61</td></tr>
			<tr><th>Jun</th><td>47</td></tr>
			<tr><th>Jul</th><td>39</td></tr>
			<tr><th>Aug</th><td>52</td></tr>
		</tbody>
	</table>
</figure>

The scale

If a chart has an axis or gridlines, its scale ends on a number of the axis. For example, if the highest value is 84 and the numbers on the axis go up by 10, the scale ends at 90.

To set the scale yourself, add data-chart-scale to the figure, with the number where the scale starts and the number where it ends. Tablechart then chooses the numbers on the axis between them.

HTML 
<figure data-chart="column" data-chart-axis data-chart-scale="0 100">

If you give three numbers or more, those are the numbers on the axis.

Apples picked, out of 100
Spring 58
Summer 72
Autumn 70
Winter 41
HTML 
<figure data-chart="column" data-chart-axis data-chart-grid data-chart-scale="0 25 50 75 100">
	<figcaption><b>Apples picked, out of 100</b></figcaption>
	<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>

If a value is higher than the end of your scale, the scale goes on to that value, so the bar or point is shown whole.

On a column, bar, line, area or waterfall chart, the scale always includes zero. On a scatter chart it does not. There data-chart-scale sets the axis up, and data-chart-scale-x the axis across.

The variables

Variable Sets
--tablechart-axis-color The lines of the axes: the text colour at 55% by default
--tablechart-axis-width The width of the lines of the axes: 1px by default
--tablechart-axis-size The size of the numbers and titles along the axes: the size of the names by default
--tablechart-axis-text-color The colour of the numbers and titles along the axes: the text colour by default
--tablechart-grid-color The colour of the gridlines: the text colour by default
--tablechart-grid-opacity The opacity of the gridlines: 0.09 by default
--tablechart-grid-width The width of the gridlines: 1px by default

Softer axes, stronger gridlines

In this example the axes are lighter and the gridlines are stronger.

CSS 
.soft-axes {
	--tablechart-axis-color: color-mix(in oklab, currentColor 25%, transparent);
	--tablechart-grid-opacity: 0.25;
}
Variety Harvest per tree (kg) Price per kg (€)
Elstar 62 1.20
Jonagold 75 1.05
Braeburn 48 1.45
Gala 55 1.30
Cox 35 1.85
Discovery 30 1.75
HTML 
<figure class="soft-axes" data-chart="scatter" data-chart-grid>
	<table>
		<thead>
			<tr><th>Variety</th><th>Harvest per tree (kg)</th><th>Price per kg (€)</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>62</td><td>1.20</td></tr>
			<tr><th>Jonagold</th><td>75</td><td>1.05</td></tr>
			<tr><th>Braeburn</th><td>48</td><td>1.45</td></tr>
			<tr><th>Gala</th><td>55</td><td>1.30</td></tr>
			<tr><th>Cox</th><td>35</td><td>1.85</td></tr>
			<tr><th>Discovery</th><td>30</td><td>1.75</td></tr>
		</tbody>
	</table>
</figure>

Dashed gridlines

The gridlines are one path with the class tablechart-grid. To set more than the variables, such as dashes, use CSS on that class. A dash is in pixels, at any size of the chart.

CSS 
.dashed-grid .tablechart-grid {
	stroke-dasharray: 1 3;
	opacity: 0.4;
}
Variety Harvest per tree (kg) Price per kg (€)
Elstar 62 1.20
Jonagold 75 1.05
Braeburn 48 1.45
Gala 55 1.30
Cox 35 1.85
Discovery 30 1.75
HTML 
<figure class="dashed-grid" data-chart="scatter" data-chart-grid>
	<table>
		<thead>
			<tr><th>Variety</th><th>Harvest per tree (kg)</th><th>Price per kg (€)</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>62</td><td>1.20</td></tr>
			<tr><th>Jonagold</th><td>75</td><td>1.05</td></tr>
			<tr><th>Braeburn</th><td>48</td><td>1.45</td></tr>
			<tr><th>Gala</th><td>55</td><td>1.30</td></tr>
			<tr><th>Cox</th><td>35</td><td>1.85</td></tr>
			<tr><th>Discovery</th><td>30</td><td>1.75</td></tr>
		</tbody>
	</table>
</figure>

The numbers and titles

--tablechart-axis-size sets the size of the numbers and the titles along the axes. To style them separately, use the class tablechart-tick for the numbers and tablechart-axis-title for the titles.

CSS 
.small-axes {
	--tablechart-axis-size: 0.8em;
}
.small-axes .tablechart-axis-title {
	font-weight: 600;
}
Variety Harvest per tree (kg) Price per kg (€)
Elstar 62 1.20
Jonagold 75 1.05
Braeburn 48 1.45
Gala 55 1.30
Cox 35 1.85
Discovery 30 1.75
HTML 
<figure class="small-axes" data-chart="scatter">
	<table>
		<thead>
			<tr><th>Variety</th><th>Harvest per tree (kg)</th><th>Price per kg (€)</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>62</td><td>1.20</td></tr>
			<tr><th>Jonagold</th><td>75</td><td>1.05</td></tr>
			<tr><th>Braeburn</th><td>48</td><td>1.45</td></tr>
			<tr><th>Gala</th><td>55</td><td>1.30</td></tr>
			<tr><th>Cox</th><td>35</td><td>1.85</td></tr>
			<tr><th>Discovery</th><td>30</td><td>1.75</td></tr>
		</tbody>
	</table>
</figure>

If the numbers are smaller, there is room for more of them, so the axis may show more numbers.

To make the numbers lighter or darker than the names, set --tablechart-axis-text-color. The names have their own colour, --tablechart-name-color.

CSS 
.light-axes {
	--tablechart-axis-text-color: color-mix(in oklab, currentColor 55%, transparent);
}
Spring 58
Summer 72
Autumn 70
Winter 41
HTML 
<figure class="light-axes" data-chart="column" data-chart-axis>
	<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>

Light and dark

By default, the axes and gridlines use the text colour, so they change with the colour scheme. To set a colour for each scheme, use light-dark(). See Light and dark.

CSS 
:root {
	--tablechart-grid-color: light-dark(#16323f, #f3efe9);
	--tablechart-axis-color: light-dark(#8aa0aa, #5b6f78);
}

Next

See CSS variables for all variables.