Legends

The names of the lines or slices, in a row under the chart.

Legend for several lines

On a line chart with several lines, the names are shown at the end of the lines. Add data-chart-legend to the figure to show them in a legend under the chart instead. Each name has a short sample of its line.

Apples per tree
Year North South East
2016 41 30 22
2019 58 39 35
2022 77 52 41
2025 105 61 70
HTML 
<figure data-chart="line" data-chart-legend>
	<figcaption><b>Apples per tree</b></figcaption>
	<table>
		<thead>
			<tr><th>Year</th><th>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>

To use a legend for every chart, set the legend option. Then data-chart-legend="false" turns it off for one chart.

JS 
init({ legend: true });

Area, column and bar legends

In an area chart, data-chart-legend works the same way. Each name has a square of the colour of its area.

A grouped or stacked column or bar chart always has a legend under the chart, with a square for each name.

Donut legend

A donut chart always has a legend under the ring. See Donut.

Style the legend

A legend is as wide as its items. These variables set its background, border, padding and corners. By default, there are none.

Year North South
2016 41 30
2019 58 39
2022 77 52
2025 105 61
HTML 
<figure data-chart="line" data-chart-legend style="--tablechart-legend-border: 1px solid currentColor; --tablechart-legend-padding: 0.3em 0.8em; --tablechart-legend-radius: 0.4em">
	<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>
Variable Sets
--tablechart-legend-surface The background
--tablechart-legend-border The border
--tablechart-legend-padding The space inside the border
--tablechart-legend-radius The corners
--tablechart-legend-gap The space above the legend of a line chart