Translation

What gets translated

All text in a chart is HTML: the title, the names of the rows and columns, and the badges of annotations. A translation script can translate it like any other text on the page.

Numbers are not translated. They are formatted for the language of the page. See Numbers.

Translation keys

Many translation scripts find text by a translation key in an attribute, such as data-i18n. Add data-chart-keys to the figure, and Tablechart adds translation keys to the names in the table. The value of data-chart-keys is the start of each key: -row1, -row2 and so on for the names of the rows, and -col1, -col2 and so on for the column headers. The names in the chart get the same keys.

<figure data-chart="column" data-chart-keys="apples">
	<table>
		<tbody>
			<tr><th data-i18n="apples-row1">Spring</th><td>58</td></tr>
			<tr><th data-i18n="apples-row2">Summer</th><td>72</td></tr>
		</tbody>
	</table>
</figure>

If a cell already has a key, Tablechart keeps it. The title and the badges are your own HTML, so give them a key yourself.

Without data-chart-keys, Tablechart adds no translation keys.

To use another attribute for the keys, set the langattribute option. To add no keys at all, also on figures with data-chart-keys, set it to false.

init({ langattribute: "data-key" });

Example

The figure has data-chart-keys="harvest", so Tablechart adds the translation keys harvest-row1 to harvest-row3 to the names of the rows. The title and the subtitle have keys of their own. Each language has a file with a text for each key:

{
	"harvest-title": "Manzanas recogidas",
	"harvest-unit": "miles",
	"harvest-row1": "Primavera",
	"harvest-row2": "Verano",
	"harvest-row3": "Otoño"
}

{
	"harvest-title": "Pommes cueillies",
	"harvest-unit": "milliers",
	"harvest-row1": "Printemps",
	"harvest-row2": "Été",
	"harvest-row3": "Automne"
}

The buttons do what a translation script does: they replace the text of each element with a key, and then set the lang attribute of the page. The numbers change with the language, and the chart is laid out again for the new names.

<figure id="harvest" data-chart="column" data-chart-keys="harvest">
	<figcaption><b data-i18n="harvest-title">Apples picked</b><br><span data-i18n="harvest-unit">thousands</span></figcaption>
	<table>
		<tbody>
			<tr><th>Spring</th><td>58.5</td></tr>
			<tr><th>Summer</th><td>72.0</td></tr>
			<tr><th>Autumn</th><td>70.5</td></tr>
		</tbody>
	</table>
</figure>

When to translate

Tablechart makes the names in the chart when it starts. Run your translation script after init() has finished. init() returns a promise.

import { init } from "@martinomagnifico/tablechart";

await init();
translatePage();

Changing the language

If the lang attribute of the html element changes, the numbers change with it. Then the charts are laid out again, a moment later, so a translation script has time to change the names first.

If a script changes the text of a chart without changing lang, lay the charts out again with refresh().

const tablechart = await init();

translatePage();
tablechart.refresh();

Next

To check what screen readers read, see Accessibility.