JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highcharts.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 () {
// 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],
textElements = chart.container.getElementsByTagName('text'),
titleId = 'highcharts-title-' + chart.index,
descId = 'highcharts-desc-' + chart.index,
tooltipInfo = document.createElement('div'),
tooltipInfoId = 'highcharts-tooltip-info-' + chart.index,
ariaTable,
tableHeaders,
chartDesc,
chartTypes = [],
chartType,
typeStartsWithVowel,
i;
if (options.accessibility && options.accessibility.enabled === false) {
return;
}
// Hide text elements from screen readers
for (i = 0; i < textElements.length; ++i) {
textElements[i].setAttribute('aria-hidden', 'true');
}
// 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 =...