Column
One bar per row, standing on the baseline.
Column chart
Each row of the table is a column. The number is shown above it.
thousands
| Spring | 58 |
|---|---|
| Summer | 72 |
| Autumn | 70 |
| Winter | 91 |
<figure data-chart="column">
<figcaption><b>Apples picked</b><br><span>thousands</span></figcaption>
<table>
<tbody>
<tr><th>Spring</th><td>58</td></tr>
<!-- …one row per column-->
</tbody>
</table>
</figure>Numbers inside the columns
Add data-chart-labels="inside" to show each number inside its column, at the top. To move it, see Text. If a column is too short for its number, the number is shown above it.
| Spring | 58 |
|---|---|
| Summer | 72 |
| Autumn | 70 |
| Winter | 9 |
<figure data-chart="column" data-chart-labels="inside"></figure>Height
The height of a chart is a share of its width. Set it with data-chart-aspect. The default is 0.38.
On a narrow screen, a chart is never less high than --tablechart-min-height: 200px by default. Below that width, the height stays the same. Use px, em or rem, or none for no minimum.
| Spring | 58 |
|---|---|
| Summer | 72 |
| Autumn | 70 |
<figure data-chart="column" data-chart-aspect="0.6">
<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>
</tbody>
</table>
</figure>Below zero
A column with a value below zero hangs down from the baseline, with its number under it. The baseline moves up to make room.
thousands of euros
| Jan | 12.6 |
|---|---|
| Feb | 28.7 |
| Mar | -11.7 |
| Apr | -36.3 |
| May | 19.8 |
| Jun | -4.1 |
<figure data-chart="column">
<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 column of a group hangs down or stands up on its own.
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 |
<figure data-chart="column">
<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 columns
If the table has more than one value column, each row is a group, with one column for each value column. The column headers are the names in the legend under the chart.
thousands
| Variety | 2022 | 2026 |
|---|---|---|
| Elstar | 118 | 131 |
| Granny Johnson | 12 | 45 |
| Jonagold | 140 | 135 |
| Braeburn | 109 | 121 |
<figure data-chart="column">
<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 class="granny"><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>Each column of a group is a bit lighter than the one before it. To set a colour for each, use a palette. A class on a row styles its whole group, as the Granny Johnson does here:
.granny {
--tablechart-bar-color: #7fb03f;
}If the numbers are wider than their columns, they all get smaller together, down to 70% of their size. If they still do not fit, none of them are shown. If you point at the row, or tap it, a tooltip shows the numbers of that row.
Stacked columns
Add data-chart-stack to the figure. The values of a row are shown on top of each other, the first value column at the bottom. Values below zero are stacked down from the baseline. The total of the row is above the column.
thousands
| Year | Farm shop | Market |
|---|---|---|
| 2023 | 64 | 38 |
| 2024 | 71 | 45 |
| 2025 | 69 | 57 |
| 2026 | 80 | 62 |
<figure data-chart="column" data-chart-stack>
<figcaption><b>Apples sold</b><br><span>thousands</span></figcaption>
<table>
<thead>
<tr><th>Year</th><th>Farm shop</th><th>Market</th></tr>
</thead>
<tbody>
<tr><th>2023</th><td>64</td><td>38</td></tr>
<tr><th>2024</th><td>71</td><td>45</td></tr>
<tr><th>2025</th><td>69</td><td>57</td></tr>
<tr><th>2026</th><td>80</td><td>62</td></tr>
</tbody>
</table>
</figure>A number is shown inside its part of the column 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 down from the baseline. The total is the sum of all parts, above the column, or under it if the whole stack is below zero.
thousands of euros
| Month | Shop | Market |
|---|---|---|
| Jan | 12 | -4 |
| Feb | 8 | -9 |
| Mar | -6 | 3 |
| Apr | -14 | -7 |
| May | 4 | -2 |
| Jun | 10 | 5 |
<figure data-chart="column" 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>A bar chart on narrow screens
A column chart with many rows can be shown as a bar chart when it is narrow. Set --tablechart-type: bar on the figure, in a container query or a media query. The chart is built again as a bar chart when the query applies, and as a column chart when it does not.
.type-box {
container-type: inline-size;
}
@container (max-width: 500px) {
.type-box > [data-chart] {
--tablechart-type: bar;
}
}The buttons change the width of the example.
| Jan | 41 |
|---|---|
| Feb | 38 |
| Mar | 52 |
| Apr | 61 |
| May | 74 |
| Jun | 88 |
| Jul | 93 |
| Aug | 90 |
| Sep | 77 |
| Oct | 63 |
| Nov | 49 |
| Dec | 45 |
<div class="type-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>--tablechart-type works for column and bar charts. It can also turn a bar chart into a column chart, with --tablechart-type: column.
Scale break
If one column is much taller than the others, a break in the scale shows part of the scale smaller, so the other columns have room. See Scale break.
| Elstar | 12 |
|---|---|
| Jonagold | 15 |
| Braeburn | 14 |
| Gala | 140 |
<figure data-chart="column">
<table>
<tbody>
<tr><th>Elstar</th><td>12</td></tr>
<tr><th>Jonagold</th><td>15</td></tr>
<tr><th>Braeburn</th><td>14</td></tr>
<tr><th>Gala</th><td>140</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 columns show the values. To add numbers along the axis, on the left, 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.
| Spring | 58 |
|---|---|
| Summer | 72 |
| Autumn | 70 |
| Winter | 41 |
<figure data-chart="column" data-chart-axis data-chart-grid>
<figcaption><b>Apples picked</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 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
Annotations add a bracket or a trend arrow to a column chart.