Chart — Loidolt Theme

import { Chart } from '@loidolt/theme-charts';

Example

Birch ply against target

Birch ply against target
Month	Cut	Target
Jan	42	50
Feb	48	54
Mar	51	58
Apr	63	62
May	58	66
Jun	66	70
Jul	71	74
Aug	69	78
Sep	74	82
Oct	80	86
Nov	92	90
Dec	88	94

Last night's export

No data to show

Nothing has been exported yet.

Notes

Takes an option or a function of the theme colours. Whatever the option leaves unset — palette, axes, gridlines, tooltip, legend — comes from the tokens, read live off the page, so a theme change recolours the chart in place.
A <figure> whose caption names the picture (role="img"), with description read after it. Pass table for the data itself: rendered for assistive tech by default, behind a disclosure button with dataTable="toggle", or always with visible.
Updates replace the option, so a series removed from the data leaves the chart. merge keeps zoom and legend state instead.
ECharts loads in the browser only. The server renders the caption, description and table, and if ECharts cannot load at all the chart says so and shows its table.

Props

Generated from the component source, so it cannot drift from the implementation.

Chart props
Prop	Type	Default	Notes
`option` required	`ChartOptionSource`	`—`	An ECharts option, or a function of the theme colours that builds one.
`title` required	`string`	`—`	Names the chart — its caption, and the accessible name of the picture.
`animation`	`boolean`	`true`	Transitions. Always off when the user prefers reduced motion.
`class`	`string`	`—`
`dataTable`	`TableMode`	`'hidden'`	How the table appears: `hidden` for assistive tech only, `toggle` behind a button, `visible` always, `none` not at all.
`decal`	`boolean`	`false`	Patterns on fills, so series are told apart without relying on colour.
`description`	`string`	`—`	What the chart shows, in a sentence or two, read after the title. The wrappers write one from the data; say what matters most if you know better.
`empty`	`boolean`	`false`	Shows the empty state in place of the chart. The wrappers set it when there is no data.
`emptyDescription`	`string`	`—`
`emptyTitle`	`string`	`'No data to show'`
`error`	`string \| null`	`null`	Shows the message in place of the chart.
`errorTitle`	`string`	`'The chart could not be shown'`
`extensions`	`ChartExtensions`	`() => import('../echarts/all.js').then((module) => module.default)`	The ECharts modules this chart draws with. Defaults to every chart type; the wrappers pass only their own.
`height`	`number \| string`	`320`	Chart height: pixels, or any CSS length.
`hideTableLabel`	`string`	`'Hide data table'`
`hideTitle`	`boolean`	`false`	Keep the caption for assistive tech only, when a heading nearby already names the chart.
`instance` bindable	`EChartsInstance \| null`	`null`	The live ECharts instance. Bindable; `null` until loaded.
`loading`	`boolean`	`false`	Shows a placeholder while the data is on its way.
`loadingLabel`	`string`	`'Loading chart'`
`merge`	`boolean`	`false`	Merge updates into the chart rather than replacing the option — keeps zoom and legend state across data updates. Series and datasets are still replaced whole.
`onItemClick`	`(event: ChartItemEvent) => void`	`—`	A click on a data point, slice or node.
`onReady`	`(instance: EChartsInstance) => void`	`—`	Called once the ECharts instance exists, for anything the props do not cover.
`onRetry`	`() => void`	`—`	Offers a retry button with the error.
`ref` bindable	`HTMLElement \| null`	`null`
`renderer`	`'canvas' \| 'svg'`	`'canvas'`	`svg` stays crisp in print and at any zoom; `canvas` is faster with many points.
`retryLabel`	`string`	`'Try again'`
`showTableLabel`	`string`	`'Show data table'`
`table`	`ChartTable`	`—`	The data as a table: the chart's non-visual alternative.
`tableFormat`	`FormatOptions`	`—`	How numbers in the table are written.
`unavailableText`	`string`	`'Charts could not be loaded. The data is in the table below.'`	Shown if ECharts itself cannot be loaded.

Plus the attributes of Omit<HTMLAttributes<HTMLElement>, 'title'>, forwarded to the root element.