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://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://github.highcharts.com/sonification/modules/sonification.js"></script>

<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 3em 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: #ffffee;
}

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

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

JavaScript

Highcharts.chart('container', {
    title: {
        text: 'Try the "sonify" option in the hamburger menu'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
    },
    chart: {
        type: 'spline'
    },
    series: [{
        data: [229.9, 271.5, 306.4, 529.2, 344.0, 476.0, 735.6, 348.5, 316.4,
            394.1, 295.6, 154.4]
    }, {
        data: [129.9, 171.5, 206.4, 429.2, 244.0, 376.0, 635.6, 248.5, 216.4,
            294.1, 195.6, 54.4]
    }]
});