JSFiddle - React, Tailwind, and code Playground
by oysteinmoseng
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<div id="container"></div>
CSS
#container {
max-width: 800px;
height: 400px;
margin: 1em auto;
}
JavaScript
$(function () {
// Plugin for increasing chart accessibility
(function (H) {
H.Chart.prototype.callbacks.push(function (chart) {
var options = chart.options,
acsOptions = options.accessibility || {},
series = chart.series,
numSeries = series.length,
numXAxes = chart.xAxis.length,
numYAxes = chart.yAxis.length,
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,
tableId = 'highcharts-data-table-' + chart.index,
oldColumnHeaderFormatter = options.exporting && options.exporting.csv && options.exporting.csv.columnHeaderFormatter,
topLevelColumns = [],
chartTitle = options.title.text || 'Chart',
chartDesc,
chartTypes = [],
i;
if (!acsOptions.enabled) {
return;
}
// Get label for axis (x or y)
function getAxisLabel(axis) {
return axis.userOptions && axis.userOptions.description || axis.axisTitle && axis.axisTitle.textStr ||
axis.options.id || axis.categories && 'categories' || 'Undeclared';
}
// Hide text elements from screen readers
for (i = 0; i < textElements.length; ++i) {
textElements[i].setAttribute('aria-hidden', 'true');
}
// Enumerate chart types
for (i = 0; i < numSeries; ++i) {
if (chartTypes.indexOf(series[i].type) < 0) {
chartTypes.push(series[i].type);
}
}
...