JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

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://github.highcharts.com/modules/accessibility.src.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

caption {
	padding-bottom: 5px;
	font-family: 'Verdana';
	font-size: 14pt;
	font-weight: bold;
	color:#555555;
}

table {
	font-family: 'Verdana';
	font-size: 12pt;
	color:#555555;              
	border-collapse: collapse;
	border: 3px solid #CCCCCC;
	margin: 2px auto;	
}

tr {
  	border-bottom: 2px solid #EEEEEE;
}

th {
	border-left: 2px solid #EEEEEE;
	border-right: 2px solid #EEEEEE;
	padding: 12px 15px;
	border-collapse: collapse;
}

th[scope="col"] {
	background-color: #ffffcc;
}

th[scope="row"] {
	background-color: #d5f2fd;
	text-align:left;
}

td {
  	border-left: 2px solid #EEEEEE;
  	border-right: 2px solid #EEEEEE;
  	padding: 12px 15px;
  	border-collapse: collapse;
}

JavaScript

$(function () {

    $('#container').highcharts({
        accessibility: {
            enabled: true,
            description: 'Most commonly used desktop screen readers from January 2009 to July 2015 as reported in the Webaim Survey.'
        },

        chart: {
            type: 'spline'
        },

        legend: {
            symbolWidth: 40
        },

        title: {
            text: 'Desktop screen readers from 2009 to 2015'
        },

        subtitle: {
            text: 'Click on point to visit official website'
        },

        yAxis: {
            title: {
                text: 'Percentage usage'
            }
        },

        xAxis: {
            title: {
                text: 'Time'
            },
            categories: ['January 2009', 'December 2010', 'May 2012', 'January 2014', 'July 2015']
        },

        plotOptions: {
            series: {
                events: {
                    click: function () {
                        window.location.href = this.options.website;
                    }
                },
                cursor: 'pointer'
            }
        },

        series: [
            {
                name: 'JAWS',
                data: [74, 69.6, 63.7, 63.9, 43.7],
                website: 'https://www.freedomscientific.com/Products/Blindness/JAWS'
            }, {
                name: 'NVDA',
                data: [8, 34.8, 43.0, 51.2, 41.4],
                website: 'https://www.nvaccess.org',
                dashStyle: 'Dot'
            }, {
                name: 'VoiceOver',
                data: [6, 20.2, 30.7, 36.8, 30.9],
                website: 'http://www.apple.com/accessibility/osx/voiceover',
                dashStyle: 'ShortDot',
                color: Highcharts.getOptions().colors[7]
            }, {
                name: 'Window-Eyes',
                data: [23, 19.0, 20.7, 13.9, 29.6],
                website: 'http://www.gwmicro.com/window-eyes',
                dashStyle: 'Dash',
         ...