JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<div id="container" tabindex="1"></div>
CSS
#container {
max-width: 800px;
height: 400px;
margin: 1em auto;
}
JavaScript
$(function () {
/*
TODO:
- SVG title and desc elements
- More ARIA attributes (labelledby, role?)
- Smart adding of scope="row" and "col" to table
- Axis labels
*/
// Code snippet for adding a HTML table representation of the chart data
Highcharts.Chart.prototype.callbacks.push(function (chart) {
var options = chart.options,
series = chart.series,
numSeries = series.length,
div = document.createElement('div'),
tableSummary = document.createElement('caption'),
ariaTable,
tableHeaders,
chartDesc,
chartDescLong,
chartTypes = [],
chartType,
typeStartsWithVowel,
i;
// Make chart type string
for (i = 0; i < numSeries; ++i) {
if (chartTypes.indexOf(series[i].type) < 0) chartTypes.push(series[i].type);
}
chartType = chartTypes[0];
for (i = 1; i < chartTypes.length - 1; ++i) {
chartType += ', ' + chartTypes[i];
}
if (chartTypes.length > 1) {
chartType += ' and ' + chartTypes[chartTypes.length - 1] + ' combination';
}
typeStartsWithVowel = !chartType || 'aeiouy'.indexOf(chartType.charAt(0)) > -1;
// Build chart description
chartDesc = (typeStartsWithVowel ? 'An ' : 'A ') + chartType + ' chart.'
+ (options.title.text ? ' Title: ' + options.title.text + '.' : '')
+ (options.subtitle.text ? ' ' + options.subtitle.text + '.' : '');
chartDescLong = chartDesc + (options.chart.description ? ' ' + options.chart.description : '');
if (chartDescLong.slice(-1) !== '.') chartDescLong += '.';
// Add series info
if (numSeries) {
chartDescLong += ' The chart displays ' + numSeries + ' series, containing ';
if (numSeries < 2) {
chartDescLong +=...