Area
A line chart with the space under the line filled.
Area chart
Each row of the table is a point. The space between the line and zero is filled. The number is shown above each point.
thousands
| 2021 | 12 |
|---|---|
| 2022 | 18 |
| 2023 | 15 |
| 2024 | 24 |
| 2025 | 29 |
<figure data-chart="area">
<figcaption><b>Visitors to the orchard</b><br><span>thousands</span></figcaption>
<table>
<tbody>
<tr><th>2021</th><td>12</td></tr>
<tr><th>2022</th><td>18</td></tr>
<tr><th>2023</th><td>15</td></tr>
<tr><th>2024</th><td>24</td></tr>
<tr><th>2025</th><td>29</td></tr>
</tbody>
</table>
</figure>Smooth
Add data-chart-shape="smooth" to the figure. The top of each area is a curve through every point, which never goes higher or lower than the points on either side of it. In a stack, each area follows the curve of the one below it.
thousands
| 2021 | 12 |
|---|---|
| 2022 | 18 |
| 2023 | 15 |
| 2024 | 24 |
| 2025 | 29 |
<figure data-chart="area" data-chart-shape="smooth">
<figcaption><b>Visitors to the orchard</b><br><span>thousands</span></figcaption>
<table>
<tbody>
<tr><th>2021</th><td>12</td></tr>
<tr><th>2022</th><td>18</td></tr>
<tr><th>2023</th><td>15</td></tr>
<tr><th>2024</th><td>24</td></tr>
<tr><th>2025</th><td>29</td></tr>
</tbody>
</table>
</figure>Grow
Add data-chart-animate="grow" to the figure. The area grows from zero instead of from left to right. The points move with it, and the numbers appear when it is done.
thousands
| 2021 | 12 |
|---|---|
| 2022 | 18 |
| 2023 | 15 |
| 2024 | 24 |
| 2025 | 29 |
<figure data-chart="area" data-chart-shape="smooth" data-chart-animate="grow">
<figcaption><b>Visitors to the orchard</b><br><span>thousands</span></figcaption>
<table>
<tbody>
<tr><th>2021</th><td>12</td></tr>
<tr><th>2022</th><td>18</td></tr>
<tr><th>2023</th><td>15</td></tr>
<tr><th>2024</th><td>24</td></tr>
<tr><th>2025</th><td>29</td></tr>
</tbody>
</table>
</figure>To make every line and area grow, set the animate option to "grow". A chart with triggered steps (like from Reveal.js fragments) still builds from left to right. See Animation.
Below zero
Below zero, the area hangs down from the zero line, and a number is shown under its point.
thousands of euros
| Jan | 12.6 |
|---|---|
| Feb | 28.7 |
| Mar | -11.7 |
| Apr | -36.3 |
| May | 19.8 |
| Jun | -4.1 |
<figure data-chart="area" data-chart-shape="smooth" data-chart-animate="grow">
<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>Several areas
Each value column is an area. The column header is the name of the area, shown at the end of its line. The areas overlap, so each one is see-through.
| Year | North | South |
|---|---|---|
| 2016 | 41 | 30 |
| 2019 | 58 | 39 |
| 2022 | 77 | 52 |
| 2025 | 105 | 61 |
<figure data-chart="area">
<figcaption><b>Apples per tree</b></figcaption>
<table>
<thead>
<tr><th>Year</th><th>North</th><th>South</th></tr>
</thead>
<tbody>
<tr><th>2016</th><td>41</td><td>30</td></tr>
<tr><th>2019</th><td>58</td><td>39</td></tr>
<tr><th>2022</th><td>77</td><td>52</td></tr>
<tr><th>2025</th><td>105</td><td>61</td></tr>
</tbody>
</table>
</figure>The numbers work as in a line chart. With two areas, the number of the lower point is below it. If there is no room for it above zero, it is above the point.
Highlight an area
Add data-kind="focus" to the header of a column. That area keeps its colour and shows its numbers. The other areas are shown fainter.
| Year | North | South | East |
|---|---|---|---|
| 2016 | 41 | 30 | 22 |
| 2019 | 58 | 39 | 35 |
| 2022 | 77 | 52 | 41 |
| 2025 | 105 | 61 | 70 |
<figure data-chart="area">
<table>
<thead>
<tr><th>Year</th><th data-kind="focus">North</th><th>South</th><th>East</th></tr>
</thead>
<tbody>
<tr><th>2016</th><td>41</td><td>30</td><td>22</td></tr>
<tr><th>2019</th><td>58</td><td>39</td><td>35</td></tr>
<tr><th>2022</th><td>77</td><td>52</td><td>41</td></tr>
<tr><th>2025</th><td>105</td><td>61</td><td>70</td></tr>
</tbody>
</table>
</figure>Change the fill
The fill has the colour of the line, at 25% opacity. To change it, set these variables.
| Variable | Sets |
|---|---|
--tablechart-area-opacity |
The opacity of the fill. The default is 0.25. |
--tablechart-area-color |
The colour of the fill. By default, the colour of the line. |
| 2021 | 12 |
|---|---|
| 2022 | 18 |
| 2023 | 15 |
| 2024 | 24 |
| 2025 | 29 |
<figure data-chart="area" style="--tablechart-area-opacity: 0.5">
<table>
<tbody>
<tr><th>2021</th><td>12</td></tr>
<tr><th>2022</th><td>18</td></tr>
<tr><th>2023</th><td>15</td></tr>
<tr><th>2024</th><td>24</td></tr>
<tr><th>2025</th><td>29</td></tr>
</tbody>
</table>
</figure>Stacked areas
Add data-chart-stack to the figure. Each area starts on top of the one before it, the first value column at the bottom. A value below zero takes its area down from the one before it. Each number is shown in the middle of its area, if there is room for it. If you point at the row, or tap it, a tooltip shows the numbers of that row.
thousands
| Year | Farm shop | Market |
|---|---|---|
| 2023 | 64 | 38 |
| 2024 | 71 | 45 |
| 2025 | 69 | 57 |
| 2026 | 80 | 62 |
<figure data-chart="area" 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>Stacked areas do not overlap, so their default opacity is 0.5.
In a stack, each area adds its value to the one before it, also below zero. The top line is the total. A number of a part below zero is in the tooltip of its row, so it does not cover the number of the area under it.
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="area" 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>Steps
Add data-chart-shape="step" to the figure. Each value is flat across the width of its row, and the line goes straight up or down to the next row. A number is shown only where the value changes, in the middle of the rows that have that value. If a number is wider than those rows, it is left out. If you point at the row, or tap it, a tooltip shows the numbers of that row.
share of the land, by kind of tree
| Year | Apple trees | Pear trees |
|---|---|---|
| 2014 | 90% | 10% |
| 2015 | 90% | 10% |
| 2016 | 90% | 10% |
| 2017 | 75% | 25% |
| 2018 | 75% | 25% |
| 2019 | 75% | 25% |
| 2020 | 75% | 25% |
| 2021 | 60% | 40% |
| 2022 | 60% | 40% |
| 2023 | 55% | 45% |
| 2024 | 55% | 45% |
| 2025 | 55% | 45% |
<figure data-chart="area" data-chart-stack data-chart-shape="step" data-chart-legend>
<figcaption><b>Land at the orchard</b><br><span>share of the land, by kind of tree</span></figcaption>
<table>
<thead>
<tr><th>Year</th><th>Apple trees</th><th>Pear trees</th></tr>
</thead>
<tbody>
<tr><th>2014</th><td>90%</td><td>10%</td></tr>
<tr><th>2015</th><td>90%</td><td>10%</td></tr>
<tr><th>2016</th><td>90%</td><td>10%</td></tr>
<tr><th>2017</th><td>75%</td><td>25%</td></tr>
<tr><th>2018</th><td>75%</td><td>25%</td></tr>
<tr><th>2019</th><td>75%</td><td>25%</td></tr>
<tr><th>2020</th><td>75%</td><td>25%</td></tr>
<tr><th>2021</th><td>60%</td><td>40%</td></tr>
<tr><th>2022</th><td>60%</td><td>40%</td></tr>
<tr><th>2023</th><td>55%</td><td>45%</td></tr>
<tr><th>2024</th><td>55%</td><td>45%</td></tr>
<tr><th>2025</th><td>55%</td><td>45%</td></tr>
</tbody>
</table>
</figure>Missing values
If a cell has no number, such as n/a, the area has a gap there.
| Jan | 88 |
|---|---|
| Feb | 74 |
| Mar | n/a |
| Apr | 49 |
| May | 55 |
<figure data-chart="area">
<table>
<tbody>
<tr><th>Jan</th><td>88</td></tr>
<tr><th>Feb</th><td>74</td></tr>
<tr><th>Mar</th><td>n/a</td></tr>
<tr><th>Apr</th><td>49</td></tr>
<tr><th>May</th><td>55</td></tr>
</tbody>
</table>
</figure>Axis and gridlines
By default there is no value axis: the numbers on the points 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.
thousands
| 2021 | 12 |
|---|---|
| 2022 | 18 |
| 2023 | 15 |
| 2024 | 24 |
| 2025 | 29 |
<figure data-chart="area" data-chart-axis data-chart-grid>
<figcaption><b>Visitors to the orchard</b><br><span>thousands</span></figcaption>
<table>
<tbody>
<tr><th>2021</th><td>12</td></tr>
<tr><th>2022</th><td>18</td></tr>
<tr><th>2023</th><td>15</td></tr>
<tr><th>2024</th><td>24</td></tr>
<tr><th>2025</th><td>29</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
To show the names in a row under the chart, see Legends.