Text

The font and the sizes of the text in a chart.

Font

All text in a chart is HTML, so it uses the font of the page. To use another font in a chart, set font-family on it.

Sizes

--tablechart-font-size sets the size of all text in a chart: 1em by default. The other sizes are relative to it.

CSS 
.sizes {
	--tablechart-value-size: 2em;
	--tablechart-name-size: 0.75em;
}
Spring 58
Summer 72
Autumn 70
Winter 91
HTML 
<figure class="sizes" 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>91</td></tr>
		</tbody>
	</table>
</figure>
Variable Sets
--tablechart-font-size All text in a chart: 1em by default.
--tablechart-name-size All names, under the bars and beside the lines: 0.95em by default.
--tablechart-value-size The numbers on the bars: 1.3 times the names by default.
--tablechart-centre-size The number in the middle of a donut: 1.6em by default.
--tablechart-caption-align The alignment of the title: left by default.
--tablechart-caption-gap The space under the title: 0.5em by default.

Text colours

By default, all text in a chart has the text colour of the chart. To give some of it another colour, set one of these variables.

Variable Sets
--tablechart-name-color The names of the rows, under the columns or beside the bars
--tablechart-value-color The numbers on and after the bars, not inside them
--tablechart-axis-text-color The numbers and titles along the axes. See Axes and gridlines.

Numbers inside the bars

--tablechart-value-align sets where a number inside its bar goes: start, where the bar starts, center, or end, where it ends. On a waterfall, a step down ends at the bottom. The number is as far from the start or end as the widest number is from the sides. Columns and bars use end by default, a waterfall center.

CSS 
.inside-start {
	--tablechart-value-align: start;
}
Spring 58
Summer 72
Autumn 70
Winter 91
HTML 
<figure class="inside-start" data-chart="column" data-chart-labels="inside">
	<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>

Smaller text on narrow charts

With many columns on a narrow screen, smaller text lets more numbers fit. Make the element around the chart a container, and set --tablechart-font-size with clamp() and cqi, a share of the width of the container. In this example, the text is full size from 500px wide, and gets smaller below that, down to 75%.

CSS 
.text-box {
	container-type: inline-size;
}
.text-box > [data-chart] {
	--tablechart-font-size: clamp(0.75em, 3.2cqi, 1em);
}

The buttons change the width of the example.

Visitors per month
Jan 41
Feb 38
Mar 52
Apr 61
May 74
Jun 88
Jul 93
Aug 90
Sep 77
Oct 63
Nov 49
Dec 45
HTML 
<div class="text-box">
	<figure data-chart="column">
		<figcaption><b>Visitors per month</b></figcaption>
		<table>
			<tbody>
				<tr><th>Jan</th><td>41</td></tr>
				<tr><th>Feb</th><td>38</td></tr>
				<tr><th>Mar</th><td>52</td></tr>
				<tr><th>Apr</th><td>61</td></tr>
				<tr><th>May</th><td>74</td></tr>
				<tr><th>Jun</th><td>88</td></tr>
				<tr><th>Jul</th><td>93</td></tr>
				<tr><th>Aug</th><td>90</td></tr>
				<tr><th>Sep</th><td>77</td></tr>
				<tr><th>Oct</th><td>63</td></tr>
				<tr><th>Nov</th><td>49</td></tr>
				<tr><th>Dec</th><td>45</td></tr>
			</tbody>
		</table>
	</figure>
</div>

Much smaller than that, text gets hard to read. Numbers that still do not fit are left out, and shown in the tooltip when you point at their row.