JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://cdn.rawgit.com/highslide-software/highcharts.com/96d6dce2e5fd0d77c287d31f9dcc27f592e8aee9/js/modules/series-label.src.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 1000px;
    height: 500px;
    margin: 1em auto;
}

JavaScript

$(function () {

    // Plugin prototype 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'),
                exportGroupElement = document.createElementNS('http://www.w3.org/2000/svg', 'g'),
                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',
                hiddenSection = document.createElement('div'),
                hiddenSectionContent = '',
                tableShortcut = document.createElement('h3'),
                tableShortcutAnchor = document.createElement('a'),
                xAxisDesc,
                yAxisDesc,
                chartTypes = [],
                chartTypeDesc,
                // Descriptions for exotic chart types
                typeDescriptionMap = {
                    boxplot: ' Box plot charts are typically used to display groups of statistical data. ' +
                             'Each data point in the chart can have up to 5 values: minimum, lower quartile, median, upper quartile and maximum. ',
                    arearange: ' Arearange charts are line charts displaying a range between a...