Patterns · Chart and table

Chart with a data table

Canvas has no text, so a chart cannot describe itself to a screen reader. The honest fix is not a clever aria-label — it is the same data in a semantic table, one keystroke away. Hiding a series in the legend hides its column too.

One chart, two views

The toggle is a segmented control, so it is a single keyboard stop and the choice is exclusive. The table reads the same prepared rows the chart was given — no second data path, no recomputation.

Price and realised volatility

Apache ECharts · prepared series

What this does and does not fix

Be precise about accessibility claims.

It fixes

Every plotted number becomes readable text in a real table.
The table is reachable and operable with the keyboard alone.
Values can be copied, searched with find-in-page and zoomed with the browser.
Hidden series disappear from the table, matching what is on screen.

It does not fix

The canvas itself still needs its own name and description.
A table is not a substitute for describing the trend in words.
It is opt-in: a product decides where the toggle belongs.
It is not a CSV export; that is a separate, deliberate feature.

<ChartDataTable
  rows={rows}                 // the same rows the chart got
  xKey="time"
  series={visibleSeries}      // filtered by the legend
  caption="Price and realised volatility"
/>