Bar

Bars laid sideways, for long names.

Bar chart

Each row of the table is a bar. The names are shown to the left of the bars, so a long name fits on one line.

Juice pressed by variety
thousands of litres
Bramley seedling 31.4
Cox’s orange pippin 27.8
Egremont russet 18.2
Discovery 12.6
Worcester pearmain 9.1
HTML 
<figure data-chart="bar">
	<figcaption><b>Juice pressed by variety</b><br><span>thousands of litres</span></figcaption>
	<table>
		<tbody>
			<tr><th>Bramley seedling</th><td>31.4</td></tr>
			<tr><th>Cox’s orange pippin</th><td>27.8</td></tr>
			<tr><th>Egremont russet</th><td>18.2</td></tr>
			<tr><th>Discovery</th><td>12.6</td></tr>
			<tr><th>Worcester pearmain</th><td>9.1</td></tr>
		</tbody>
	</table>
</figure>

Numbers

If a bar is long enough, its number is shown inside it. If not, the number is shown after the bar.

Long names

A name beside a bar takes at most 40% of the width of the chart. A longer name wraps onto more lines, and the chart gets taller if it needs to. To change the width, set --tablechart-name-max, such as 30%.

A long word is hyphenated if the page has a lang attribute, such as lang="en".

Below zero

A bar with a value below zero goes to the left of the zero line, with its number before it.

Monthly result
thousands of euros
Jan 12.6
Feb 28.7
Mar -11.7
Apr -36.3
May 19.8
Jun -4.1
HTML 
<figure data-chart="bar">
	<figcaption><b>Monthly result</b><br><span>thousands of euros</span></figcaption>
	<table>
		<tbody>
			<tr><th>Jan</th><td>12.6</td></tr>
			<tr><th>Feb</th><td>28.7</td></tr>
			<tr><th>Mar</th><td>-11.7</td></tr>
			<tr><th>Apr</th><td>-36.3</td></tr>
			<tr><th>May</th><td>19.8</td></tr>
			<tr><th>Jun</th><td>-4.1</td></tr>
		</tbody>
	</table>
</figure>

With several value columns, each bar of a group goes left or right on its own.

Monthly result
thousands of euros
Month 2024 2025
Jan 12.6 -2.6
Feb 28.7 -12.2
Mar -11.7 12.0
Apr -36.3 26.8
May 19.8 -6.9
Jun -4.1 7.5
HTML 
<figure data-chart="bar">
	<figcaption><b>Monthly result</b><br><span>thousands of euros</span></figcaption>
	<table>
		<thead>
			<tr><th>Month</th><th>2024</th><th>2025</th></tr>
		</thead>
		<tbody>
			<tr><th>Jan</th><td>12.6</td><td>-2.6</td></tr>
			<tr><th>Feb</th><td>28.7</td><td>-12.2</td></tr>
			<tr><th>Mar</th><td>-11.7</td><td>12.0</td></tr>
			<tr><th>Apr</th><td>-36.3</td><td>26.8</td></tr>
			<tr><th>May</th><td>19.8</td><td>-6.9</td></tr>
			<tr><th>Jun</th><td>-4.1</td><td>7.5</td></tr>
		</tbody>
	</table>
</figure>

Grouped bars

If the table has more than one value column, each row is a group, with one bar for each value column. The column headers are the names in the legend under the chart.

Apples sold by variety
thousands
Variety 2022 2026
Elstar 118 131
Granny Johnson 12 45
Jonagold 140 135
Braeburn 109 121
HTML 
<figure data-chart="bar">
	<figcaption><b>Apples sold by variety</b><br><span>thousands</span></figcaption>
	<table>
		<thead>
			<tr><th>Variety</th><th>2022</th><th>2026</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>118</td><td>131</td></tr>
			<tr><th>Granny Johnson</th><td>12</td><td>45</td></tr>
			<tr><th>Jonagold</th><td>140</td><td>135</td></tr>
			<tr><th>Braeburn</th><td>109</td><td>121</td></tr>
		</tbody>
	</table>
</figure>

Stacked bars

Add data-chart-stack to the figure. The values of a row are shown one after the other in one bar, the first value column on the left. Values below zero are stacked to the left of the zero line. The total of the row is after the bar.

Apples sold
thousands
Variety Farm shop Market
Elstar 64 38
Granny Johnson 12 21
Jonagold 71 45
Braeburn 52 30
HTML 
<figure data-chart="bar" data-chart-stack>
	<figcaption><b>Apples sold</b><br><span>thousands</span></figcaption>
	<table>
		<thead>
			<tr><th>Variety</th><th>Farm shop</th><th>Market</th></tr>
		</thead>
		<tbody>
			<tr><th>Elstar</th><td>64</td><td>38</td></tr>
			<tr><th>Granny Johnson</th><td>12</td><td>21</td></tr>
			<tr><th>Jonagold</th><td>71</td><td>45</td></tr>
			<tr><th>Braeburn</th><td>52</td><td>30</td></tr>
		</tbody>
	</table>
</figure>

A number is shown inside its part of the bar if it fits. If not, it is left out. If you point at the row, or tap it, a tooltip shows the numbers of that row.

Below zero, the parts of a stack go left from the zero line. The total is the sum of all parts, after the bar, or before it if the whole stack is below zero.

Monthly result
thousands of euros
Month Shop Market
Jan 12 -4
Feb 8 -9
Mar -6 3
Apr -14 -7
May 4 -2
Jun 10 5
HTML 
<figure data-chart="bar" data-chart-stack>
	<figcaption><b>Monthly result</b><br><span>thousands of euros</span></figcaption>
	<table>
		<thead>
			<tr><th>Month</th><th>Shop</th><th>Market</th></tr>
		</thead>
		<tbody>
			<tr><th>Jan</th><td>12</td><td>-4</td></tr>
			<tr><th>Feb</th><td>8</td><td>-9</td></tr>
			<tr><th>Mar</th><td>-6</td><td>3</td></tr>
			<tr><th>Apr</th><td>-14</td><td>-7</td></tr>
			<tr><th>May</th><td>4</td><td>-2</td></tr>
			<tr><th>Jun</th><td>10</td><td>5</td></tr>
		</tbody>
	</table>
</figure>

Scale break

If one bar is much longer than the others, a break in the scale shows part of the scale smaller, so the other bars have room. See Scale break.

Bramley seedling 140
Cox’s orange pippin 15
Egremont russet 14
Discovery 12
HTML 
<figure data-chart="bar">
	<table>
		<tbody>
			<tr><th>Bramley seedling</th><td>140</td></tr>
			<tr><th>Cox’s orange pippin</th><td>15</td></tr>
			<tr><th>Egremont russet</th><td>14</td></tr>
			<tr><th>Discovery</th><td>12</td></tr>
		</tbody>
	</table>
	<div class="chart-annotations"><span data-annotation="axis-break" data-from="20"></span></div>
</figure>

Axis and gridlines

By default there is no value axis: the numbers on the bars show the values. To add numbers along the axis, under the bars, add data-chart-axis. To add a light line at each of those numbers, add data-chart-grid. You can add one of them, or both. To add them to every chart, set the axis and grid options to true.

Juice pressed by variety
thousands of litres
Bramley seedling 31.4
Cox’s orange pippin 27.8
Egremont russet 18.2
Discovery 12.6
Worcester pearmain 9.1
HTML 
<figure data-chart="bar" data-chart-axis data-chart-grid>
	<figcaption><b>Juice pressed by variety</b><br><span>thousands of litres</span></figcaption>
	<table>
		<tbody>
			<tr><th>Bramley seedling</th><td>31.4</td></tr>
			<tr><th>Cox’s orange pippin</th><td>27.8</td></tr>
			<tr><th>Egremont russet</th><td>18.2</td></tr>
			<tr><th>Discovery</th><td>12.6</td></tr>
			<tr><th>Worcester pearmain</th><td>9.1</td></tr>
		</tbody>
	</table>
</figure>

If a chart has an axis or gridlines, its scale ends on a number of the axis. To set the scale yourself, add data-chart-scale, such as data-chart-scale="0 100". To change how the axis and gridlines look, see Axes and gridlines.

Next

For short names, a column chart uses less height.