Data

A table

A chart is a figure with data-chart and a table in it. Each row of the table is a bar or a point. The first cell of a row is its name, the other cells are its values.

A chart is always a figure, with a figcaption for the title. Then the chart has a name, also for screen readers. If the element is not a figure, the console says so.

<figure data-chart="column">
	<figcaption><b>Apples picked</b><br><span>thousands</span></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>
		</tbody>
	</table>
</figure>

The table stays on the page, but it is hidden for sighted users. Screen readers, search engines and translation scripts can still read it. If JavaScript does not run, the table is all there is.

The figcaption is the title of the chart. Text after a br is shown as its subtitle. A figcaption is not needed: you can also put a heading above the figure, and style it like the other headings on your page.

Several value columns

If the table has more than 1 value column, each column is a line, or a bar in each group. The table then needs a thead: its headers are the names of the columns.

<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>
	</tbody>
</table>

See Column, Bar, Line and Area.

Attributes on rows and headers

A JSON file or endpoint

Add data-chart-src with the address of a JSON file. Tablechart reads the file and makes a table from it, and then Tablechart creates the chart from that table. If you also had an HTML table in there, that is then replaced, unless it has a header row: see Missing names. The table is made by JavaScript, so without JavaScript there is no table: see Accessibility.

<figure data-chart="column" data-chart-src="/tablechart/data/apples.json">
	<figcaption><b>Apples sold by variety</b></figcaption>
</figure>

A browser cannot read a file from a page that is opened from your computer, with an address that starts with file://. Open the page from a server.

JSON structure

The rows can be written in two ways. As a list of rows, each with its label and its value, or its values if there are more value columns:

[
	{ "label": "Jan 2025", "value": "12.4" },
	{ "label": "Feb 2025", "value": "-3.1" },
	{ "label": "Mar 2025", "value": "8.7" }
]

Or as names with their value, or their values:

{ "Spring": "58", "Summer": "72", "Autumn": "70" }

{ "Elstar": ["118", "131"], "Jonagold": ["140", "135"], "Braeburn": ["109", "121"] }

To name the columns too, put the rows, in either way, in an object with rows. series has the names of the value columns, and label the name of the first column:

{
	"label": "Variety",
	"series": ["2022", "2026"],
	"rows": [
		{ "label": "Elstar", "values": ["118", "131"] },
		{ "label": "Jonagold", "values": ["140", "135"] },
		{ "label": "Braeburn", "values": ["109", "121"] }
	]
}

Write a value as a string, such as "1.0", to keep its decimals. A row in a list with "kind": "total" is a total. In names with values, names that are whole numbers, such as "2022", come first and from low to high, whatever their order in the file. Other names keep their order.

Missing names

If the file has only rows (so data only, like the top 3 examples above), without label and series, the table has no header row, and screen readers cannot say what the columns are.

Then write just the header row in the figure yourself, in a table with only a thead. Tablechart keeps it and adds the rows from the file. A header row in the figure goes before the names in the file. Screen readers use the header row to name the columns, and with data-i18n on a th, a translation script translates it.

<figure data-chart="column" data-chart-src="/api/profit-per-month/">
	<figcaption><b>Profit per month</b></figcaption>
	<table>
		<thead>
			<tr><th>Month</th><th>Profit</th></tr>
		</thead>
	</table>
</figure>

A table from Markdown

If your Markdown tool can add attributes to a table, add data-chart to the table. This example uses markdown-it-attrs, which reads the attributes from the line after the table.

: **Apples picked**\
thousands

| Season | Apples |
| ------ | ------ |
| Spring | 58     |
| Summer | 72     |
| Autumn | 70     |
{data-chart=column}

Markdown has no figcaption, so a paragraph that starts with ": " just before or after the table is the title. A line break in it starts the subtitle. Tablechart puts the table and the title together in a div with the chart attributes.

You can also leave out the ": " paragraph and write the title as a heading above the table, such as #### Apples picked.

In the first column, a name in **bold** makes the row a total. In the header, a name in bold is highlighted.

Next

To change how the numbers are shown, see Numbers.