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>
<div id="container2" tabindex="2"></div>
CSS
#container {
height: 400px;
margin: 1em auto;
margin-bottom: 500px;
}
JavaScript
$(function () {
/*
TODO:
- Smart adding of scope="row" and "col" to table (currently hardcoded)
- Test with Highmaps
*/
// Plugin for increasing chart accessibility
(function (H) {
H.Chart.prototype.callbacks.push(function (chart) {
var options = chart.options,
series = chart.series,
numSeries = series.length,
numXAxes = chart.xAxis.length,
numYAxes = chart.yAxis.length,
div = document.createElement('div'),
tableSummary = document.createElement('caption'),
titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title'),
descElement = chart.container.getElementsByTagName('desc')[0],
tooltipInfo = document.createElement('div'),
ariaTable,
tableHeaders,
chartDesc,
chartTypes = [],
chartType,
typeStartsWithVowel,
i;
if (!(options.accessibility && options.accessibility.enabled)) {
return;
}
// 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 + '.' : '');
chartDesc += options.accessibility.description ? ' ' +...