Package Exports

chart-access

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chart-access) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

chart-access

npm

Add an accessible, auto-generated fallback to a Chart.js chart.

Install

npm install chart-access

How to use

import chartaccess from 'chart-access';

<script src='path/to/chart-access/main.js'></script>

Using chart-access with a script tag adds a global variable chartaccess to the browser window with the addFallback function.

Add fallback text

Use addFallback to add auto-generated fallback text to the canvas for a chart created with Chart.js.

chartaccess.addFallback(chart);

Example

import chartaccess from 'chart-access';

// config for chart
let chartConfig = {
    type: 'line',
    data: data,
    options: {
        title: {
            text: 'Iced Coffees Consumed Each Month of the Year',
            display: true
        }
    }
}

// create Chart.js chart
let canvas = document.getElementById('titledChart');
let titledChart = new Chart(canvas, chartConfig);

// add auto-generated fallback text to chart canvas
chartaccess.addFallback(titledChart);

Now the canvas element for your chart will provide screen reader users with basic information about the chart:

<canvas id='titledChart'>Line chart titled, 'Iced Coffees Consumed Each Month of the Year'.</canvas>

If your chart does not contain title text, the fallback text will be:

<canvas id='untitledChart'>Untitled line chart.</canvas>