Line

A line through the values, or several lines.

Line chart

Each row of the table is a point. The number is shown above each point.

Rainfall at the orchard
millimetres
Jan 84
Feb 71
Mar 76
Apr 58
May 61
Jun 47
Jul 39
Aug 52
HTML 
<figure data-chart="line">
	<figcaption><b>Rainfall at the orchard</b><br><span>millimetres</span></figcaption>
	<table>
		<tbody>
			<tr><th>Jan</th><td>84</td></tr>
			<tr><th>Feb</th><td>71</td></tr>
			<tr><th>Mar</th><td>76</td></tr>
			<tr><th>Apr</th><td>58</td></tr>
			<tr><th>May</th><td>61</td></tr>
			<tr><th>Jun</th><td>47</td></tr>
			<tr><th>Jul</th><td>39</td></tr>
			<tr><th>Aug</th><td>52</td></tr>
		</tbody>
	</table>
</figure>

Smooth

Add data-chart-shape="smooth" to the figure. The line is a curve through every point. It never goes higher or lower than the points on either side of it, so the curve shows no peak or dip that is not in the data, and a flat stretch stays flat.

Rainfall at the orchard
millimetres
Jan 84
Feb 71
Mar 76
Apr 58
May 61
Jun 47
Jul 39
Aug 52
HTML 
<figure data-chart="line" data-chart-shape="smooth">
	<figcaption><b>Rainfall at the orchard</b><br><span>millimetres</span></figcaption>
	<table>
		<tbody>
			<tr><th>Jan</th><td>84</td></tr>
			<tr><th>Feb</th><td>71</td></tr>
			<tr><th>Mar</th><td>76</td></tr>
			<tr><th>Apr</th><td>58</td></tr>
			<tr><th>May</th><td>61</td></tr>
			<tr><th>Jun</th><td>47</td></tr>
			<tr><th>Jul</th><td>39</td></tr>
			<tr><th>Aug</th><td>52</td></tr>
		</tbody>
	</table>
</figure>

To make every line and area smooth, set the shape option to "smooth". Then data-chart-shape="straight" makes one chart straight again.

Grow

Add data-chart-animate="grow" to the figure. The line grows from zero instead of from left to right. The points move with it, and the numbers appear when it is done.

Rainfall at the orchard
millimetres
Jan 84
Feb 71
Mar 76
Apr 58
May 61
Jun 47
Jul 39
Aug 52
HTML 
<figure data-chart="line" data-chart-shape="smooth" data-chart-animate="grow">
	<figcaption><b>Rainfall at the orchard</b><br><span>millimetres</span></figcaption>
	<table>
		<tbody>
			<tr><th>Jan</th><td>84</td></tr>
			<tr><th>Feb</th><td>71</td></tr>
			<tr><th>Mar</th><td>76</td></tr>
			<tr><th>Apr</th><td>58</td></tr>
			<tr><th>May</th><td>61</td></tr>
			<tr><th>Jun</th><td>47</td></tr>
			<tr><th>Jul</th><td>39</td></tr>
			<tr><th>Aug</th><td>52</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

A line can cross zero. A number below zero is shown under its point, and a grey line marks zero.

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="line" 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 lines

Each value column is a line. The column header is the name of the line, shown at the end of the line.

Apples per tree
Year North South
2016 41 30
2019 58 39
2022 77 52
2025 105 61
HTML 
<figure data-chart="line">
	<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 depend on the number of lines:

  • One line: the number is above each point.
  • Two lines: the number of the higher point is above it, the number of the lower point below it.
  • Three lines or more: if there is room, the number is above its point. If not, it is below it. If there is no room there either, the number is left out, and if you point at a point, or tap it, a tooltip shows the numbers of that row. If one line is highlighted, only that line shows its numbers.

Points

With several lines, each line has its own point, in this order: a filled circle, an open circle, a filled square, an open square, a filled diamond and an open diamond. A seventh line starts again with the filled circle. The legend shows the same points.

Apples per tree
Year North South East West
2016 41 30 22 12
2019 58 39 35 20
2022 77 52 41 33
2025 105 61 70 45
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><th>West</th></tr>
		</thead>
		<tbody>
			<tr><th>2016</th><td>41</td><td>30</td><td>22</td><td>12</td></tr>
			<tr><th>2019</th><td>58</td><td>39</td><td>35</td><td>20</td></tr>
			<tr><th>2022</th><td>77</td><td>52</td><td>41</td><td>33</td></tr>
			<tr><th>2025</th><td>105</td><td>61</td><td>70</td><td>45</td></tr>
		</tbody>
	</table>
</figure>

To choose the point of a line, add data-marker to its column header: circle, square or diamond. Add open for an open point, such as data-marker="diamond open".

Year North South
2016 41 30
2019 58 39
2022 77 52
2025 105 61
HTML 
<figure data-chart="line" data-chart-legend>
	<table>
		<thead>
			<tr><th>Year</th><th data-marker="diamond">North</th><th data-marker="diamond open">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>

An open point is cut out of the line, so the background shows through it.

Dashed and dotted lines

Add data-line="dashed" or data-line="dotted" to the column header of a line. The legend shows the same line.

Apples per tree
Year North South East West
2016 41 30 22 12
2019 58 39 35 20
2022 77 52 41 33
2025 105 61 70 45
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 data-line="dashed">South</th><th data-line="dotted">East</th><th>West</th></tr>
		</thead>
		<tbody>
			<tr><th>2016</th><td>41</td><td>30</td><td>22</td><td>12</td></tr>
			<tr><th>2019</th><td>58</td><td>39</td><td>35</td><td>20</td></tr>
			<tr><th>2022</th><td>77</td><td>52</td><td>41</td><td>33</td></tr>
			<tr><th>2025</th><td>105</td><td>61</td><td>70</td><td>45</td></tr>
		</tbody>
	</table>
</figure>

--tablechart-series-dash and --tablechart-series-dot set the pattern, in pixels: 6 4 and 0 4 by default.

To give each line its own colour, use a palette.

Highlight a line

Add data-kind="focus" to the header of a line. That line keeps its colour and shows its numbers. The other lines are shown fainter.

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">
	<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>

Steps

Add data-chart-shape="step" to the figure. Each value is a flat line across the width of its row, and the line goes straight up or down to the next row. A step line has no points. A number is shown only where the value changes, in the middle of the rows that have that value.

Price of a bag of apples
euros
Jan 2.40
Feb 2.40
Mar 2.60
Apr 2.60
May 2.60
Jun 2.90
Jul 2.90
Aug 2.70
HTML 
<figure data-chart="line" data-chart-shape="step">
	<figcaption><b>Price of a bag of apples</b><br><span>euros</span></figcaption>
	<table>
		<tbody>
			<tr><th>Jan</th><td>2.40</td></tr>
			<tr><th>Feb</th><td>2.40</td></tr>
			<tr><th>Mar</th><td>2.60</td></tr>
			<tr><th>Apr</th><td>2.60</td></tr>
			<tr><th>May</th><td>2.60</td></tr>
			<tr><th>Jun</th><td>2.90</td></tr>
			<tr><th>Jul</th><td>2.90</td></tr>
			<tr><th>Aug</th><td>2.70</td></tr>
		</tbody>
	</table>
</figure>

Stacked lines

Add data-chart-stack to the figure. Each line starts on top of the one before it. For stacked lines, an area chart is usually easier to read.

Missing values

If a cell has no number, such as n/a, the line has a gap there.

Jan 88
Feb 74
Mar n/a
Apr 49
May 55
HTML 
<figure data-chart="line">
	<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.

Rainfall at the orchard
millimetres
Jan 84
Feb 71
Mar 76
Apr 58
May 61
Jun 47
Jul 39
Aug 52
HTML 
<figure data-chart="line" data-chart-axis data-chart-grid>
	<figcaption><b>Rainfall at the orchard</b><br><span>millimetres</span></figcaption>
	<table>
		<tbody>
			<tr><th>Jan</th><td>84</td></tr>
			<tr><th>Feb</th><td>71</td></tr>
			<tr><th>Mar</th><td>76</td></tr>
			<tr><th>Apr</th><td>58</td></tr>
			<tr><th>May</th><td>61</td></tr>
			<tr><th>Jun</th><td>47</td></tr>
			<tr><th>Jul</th><td>39</td></tr>
			<tr><th>Aug</th><td>52</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.