Numbers

Text around a number

Tablechart reads the first number in each cell. Text before or after the number is shown with it, such as a currency sign, a percent sign or a footnote mark.

<figure data-chart="column">
	<figcaption><b>Price of a bag of apples</b></figcaption>
	<table>
		<tbody>
			<tr><th>Market</th><td>€2.40</td></tr>
			<tr><th>Farm shop</th><td>€2.90*</td></tr>
			<tr><th>Supermarket</th><td>€3.10</td></tr>
		</tbody>
	</table>
</figure>

Decimals

All numbers on a chart have the same number of decimals: the most that any cell has. To show one decimal, write one in at least one cell, such as 3.0.

<figure data-chart="column">
	<figcaption><b>Rainfall in a day</b></figcaption>
	<table>
		<tbody>
			<tr><th>Mon</th><td>2.5</td></tr>
			<tr><th>Tue</th><td>3.0</td></tr>
			<tr><th>Wed</th><td>4</td></tr>
			<tr><th>Thu</th><td>1.5</td></tr>
		</tbody>
	</table>
</figure>

In the middle of a donut, the total keeps its own decimals.

Thousands

Write numbers without a thousands separator, such as 12500. Tablechart adds the separator of the language of the page. A comma or a point in a number is read as the decimal separator, so 12,500 is read as 12.5.

<figure data-chart="bar">
	<figcaption><b>Apples picked</b></figcaption>
	<table>
		<tbody>
			<tr><th>North</th><td>12500</td></tr>
			<tr><th>South</th><td>9800</td></tr>
			<tr><th>East</th><td>7250</td></tr>
		</tbody>
	</table>
</figure>

Language

The decimal and thousands separators follow the lang attribute of the html element. If the lang attribute changes, the numbers change with it, and the chart is laid out again.

The buttons change the language of this page.

<figure data-chart="column">
	<figcaption><b>Apples picked</b></figcaption>
	<table>
		<tbody>
			<tr><th>2023</th><td>10250.5</td></tr>
			<tr><th>2024</th><td>11800.0</td></tr>
			<tr><th>2025</th><td>12500.5</td></tr>
		</tbody>
	</table>
</figure>

To use one language for all charts, whatever the page says, set the locale option.

init({ locale: "nl" });

Missing values

If a cell has no number, such as n/a, the row has no bar. The text of the cell is shown where the bar would be. In a line chart, the line has a gap.

<figure data-chart="column">
	<figcaption><b>Apples picked</b></figcaption>
	<table>
		<tbody>
			<tr><th>2022</th><td>86</td></tr>
			<tr><th>2023</th><td>n/a</td></tr>
			<tr><th>2024</th><td>94</td></tr>
			<tr><th>2025</th><td>101</td></tr>
		</tbody>
	</table>
</figure>

Numbers that do not fit

If there is no room for a number, it is left out. This can happen in a stacked or grouped chart, a step chart or a line chart with lines close together. The number is still in the table.

If you point at a row, or tap it, a tooltip shows all the numbers of that row. See Tooltips.

Next

To put the numbers inside the columns, see Column. To change their size and colour, see Text.