Annotations
A bracket, a trend arrow or a reference line, placed by the data.
How to add an annotation
Put a div with the class chart-annotations inside the chart. Each annotation in it is a span with data-annotation. An annotation is placed by the data, so if you change a number, the annotation moves with it.
<figure data-chart="column">
<table>…</table>
<div class="chart-annotations"><span data-annotation="bracket">+11%</span></div>
</figure>Bracket
A bracket shows the change between two bars. If the chart has two bars, no other attributes are needed.
thousands of litres
| Last season | 251.5 |
|---|---|
| This season | 279.6 |
<figure data-chart="column">
<figcaption><b>Apple juice</b><br><span>thousands of litres</span></figcaption>
<table>
<tbody>
<tr><th>Last season</th><td>251.5</td></tr>
<tr><th>This season</th><td>279.6</td></tr>
</tbody>
</table>
<div class="chart-annotations"><span data-annotation="bracket">+11%</span></div>
</figure>Choose the bars
If the chart has more bars, set data-from and data-to to the row numbers. The first row is 1.
| 2021 | 74 |
|---|---|
| 2022 | 80 |
| 2023 | 91 |
| 2024 | 102 |
| 2025 | 116 |
<figure data-chart="column">
<table>
<tbody>
<tr><th>2021</th><td>74</td></tr>
<tr><th>2022</th><td>80</td></tr>
<tr><th>2023</th><td>91</td></tr>
<tr><th>2024</th><td>102</td></tr>
<tr><th>2025</th><td>116</td></tr>
</tbody>
</table>
<div class="chart-annotations"><span data-annotation="bracket" data-from="2" data-to="5">+45%</span></div>
</figure>Trend
A trend arrow runs from the first value to the last. data-at sets where the badge is along the arrow, from 0 to 1.
Set data-years to the number of years. Tablechart calculates the yearly rate, and shows a warning in the console if it is different from yours. Your number is always the one shown.
A span with the class tablechart-caption is shown above the badge.
each
| 2021 | 74 |
|---|---|
| 2022 | 80 |
| 2023 | 91 |
| 2024 | 102 |
| 2025 | 116 |
<figure data-chart="column">
<figcaption><b>Apples per tree</b><br><span>each</span></figcaption>
<table>
<tbody>
<tr><th>2021</th><td>74</td></tr>
<tr><th>2022</th><td>80</td></tr>
<tr><th>2023</th><td>91</td></tr>
<tr><th>2024</th><td>102</td></tr>
<tr><th>2025</th><td>116</td></tr>
</tbody>
</table>
<div class="chart-annotations"><span data-annotation="trend" data-years="4" data-at="0.46"><span class="tablechart-caption">A year</span><span>+12%</span></span></div>
</figure>Reference line
A reference line marks a value, such as a target or the mean. To put it on the value axis, add data-value. The line then goes across a column, line or area chart, and up a bar chart. data-value is a number, mean or median. The mean and the median are of the values in the table.
| Spring | 58 |
|---|---|
| Summer | 72 |
| Autumn | 70 |
| Winter | 41 |
<figure data-chart="column">
<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>
<div class="chart-annotations"><span data-annotation="reference" data-value="60">Target</span></div>
</figure>If the names of the rows are numbers, add data-name to put the line among them, as if the names were a scale. Here each row is a number of apples on a branch, and its value is how many branches have that many. If you use mean or median, each name counts as often as its value: the mean is the mean number of apples on a branch.
| 2 | 3 |
|---|---|
| 3 | 8 |
| 4 | 12 |
| 5 | 9 |
| 6 | 5 |
| 7 | 2 |
<figure data-chart="column">
<figcaption><b>Branches by number of apples</b></figcaption>
<table>
<tbody>
<tr><th>2</th><td>3</td></tr>
<tr><th>3</th><td>8</td></tr>
<tr><th>4</th><td>12</td></tr>
<tr><th>5</th><td>9</td></tr>
<tr><th>6</th><td>5</td></tr>
<tr><th>7</th><td>2</td></tr>
</tbody>
</table>
<div class="chart-annotations"><span data-annotation="reference" data-name="mean">Mean 4.3</span><span data-annotation="reference" data-name="median" data-line="dotted">Median 4</span></div>
</figure>On a scatter chart, data-value is a value on the axis across, so the line goes up. To put the line across, at a value on the axis up, add data-axis="y". The mean and the median are then of the column of that axis.
| Variety | Harvest per tree (kg) | Price per kg (€) |
|---|---|---|
| Elstar | 62 | 1.20 |
| Jonagold | 75 | 1.05 |
| Braeburn | 48 | 1.45 |
| Gala | 55 | 1.30 |
| Cox | 35 | 1.85 |
| Discovery | 30 | 1.75 |
<figure data-chart="scatter">
<figcaption><b>Harvest and price per variety</b></figcaption>
<table>
<thead>
<tr><th>Variety</th><th>Harvest per tree (kg)</th><th>Price per kg (€)</th></tr>
</thead>
<tbody>
<tr><th>Elstar</th><td>62</td><td>1.20</td></tr>
<tr><th>Jonagold</th><td>75</td><td>1.05</td></tr>
<tr><th>Braeburn</th><td>48</td><td>1.45</td></tr>
<tr><th>Gala</th><td>55</td><td>1.30</td></tr>
<tr><th>Cox</th><td>35</td><td>1.85</td></tr>
<tr><th>Discovery</th><td>30</td><td>1.75</td></tr>
</tbody>
</table>
<div class="chart-annotations"><span data-annotation="reference" data-value="1.5" data-axis="y">€1.50</span></div>
</figure>The line is dashed. If you add data-line="dotted", it is dotted. The text of the annotation is the label, on the line. If two labels would cover each other, the second one moves beside its line, or one line lower. If the annotation has no text, there is only the line. Where the line crosses a number or a name on the chart, it stops a little before it and goes on after it.
If the label has a number and the line uses mean or median, Tablechart checks it, to the decimals you wrote, and shows a warning in the console if they differ. Your text is always the one shown.
Break the scale
A break in the scale is not an annotation, but it is added the same way. See Scale break.