Accessibility

API v0.xGlobalNo SSR

chartist-plugin-accessibility@0.0.5

Adds a visually hidden table with the data, a caption and a summary, so screen reader users get the numbers.

Author: Gion Kunz
Source: GitHub · npm
License: WTFPL
Downloads: 1,988 a month (October 14, 2026)
Last release: 2018
Charts: Line, Bar, Pie

See it run

The example makes the hidden table visible below the chart.

src/main.ts

import 'chartist/styles.css';
import './style.css';
import { lineChart } from 'chartist';
import { fromLegacyPlugin } from 'chartist/compat';

// Plugin scripts register on the global `Chartist`.
const { plugins } = Chartist;

lineChart(
  '#chart',
  {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      { name: 'Income', data: [5000, 6500, 4800, 7200] },
      { name: 'Expenses', data: [4200, 4700, 5100, 5000] }
    ]
  },
  {
    // A fixed height, so the table the plugin adds flows below the chart.
    height: 200,
    plugins: [
      fromLegacyPlugin(
        plugins.ctAccessibility({
          caption: 'Fiscal year 2026',
          seriesHeader: 'Business numbers',
          summary: 'Income and expenses per quarter of the fiscal year 2026',
          valueTransform: (value: number) => `${value} dollars`,
          // Shown here so you can see the table; leave this out to keep it
          // visually hidden.
          visuallyHiddenStyles: 'display: block; margin-top: 12px;'
        })
      )
    ]
  }
);

Live

Use it on your site

Runs on v2 with chartist/compat. A script: load it after importing chartist/compat, which sets up the global it reads. With the UMD build or a bundler

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/compat.min.js';
</script>
<script defer src="https://cdn.jsdelivr.net/npm/chartist-plugin-accessibility@0.0.5/dist/chartist-plugin-accessibility.js"></script>
<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.js';
  import { fromLegacyPlugin } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/compat.min.js';

  lineChart('#chart', data, {
    plugins: [fromLegacyPlugin(Chartist.plugins.ctAccessibility())]
  });
</script>