JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
	<body>
  <div>
    <div id="container"></div>
  </div>
	</body>

JavaScript

document.title = "Highcharts " + Highcharts.version;

    $(document).ready(function() {
       var chart = null;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
		spacingBottom: 35
            },
            title: {
                text: "PIOMAS Arctic Sea Ice Volume"
            },
            xAxis: {
            },
            yAxis: {
                title: {
                    text: 'Volume (10³km³)'
                }
            },
            credits: {
                text: 'Source: Pan-Arctic Ice Ocean Modeling and Assimilation<br>System (PIOMAS) Arctic Sea Ice Volume',
		href: 'http://psc.apl.washington.edu/wordpress/research/projects/arctic-sea-ice-volume-anomaly/',
		position: {
		    y: -15
		}
            },
            legend: {
                enabled: false
            },
            tooltip: {
		formatter: function() {
		    return "In year: " + this.x + ", <br>" +
                        "low: " + this.point.low + ", <br>" +
			"Q1: " + this.point.q1 + ", <br>" +
			"median: " + this.point.median + ", <br>" + 
			"Q3: " + this.point.q3 + ", <br>" +
			"high: " + this.point.high;
		}
	    },
            plotOptions: {
                boxplot: {
		    lineWidth: 2,
		    fillColor: '#808080',
		    medianColor: '#FFFFFF',
		    medianWidth: 2,
		    stemColor: "#808080",
		    stemDashStyle: 'dashdot',
		    stemWidth: 1,
		    whiskerColor: '#808080',
		    whiskerWidth: 2,
		    whiskerLength: '120%'
                }
            },
            series: [{
                type: 'boxplot',
		pointStart: 1979,
                data: [
		    [16.855, 19.287, 26.537, 31.368, 33.035 ],
		    [16.139, 18.668, 25.33, 30.632, 32.385 ],
		    [12.589, 15.536, 23.5495, 28.960, 30.848 ],
		    [13.395, 16.399, 22.078, 27.013, 29.146 ],
		    [15.077, 17.985, 23.5955, 28.970, 30.569 ],
		    [14.480, 17.090, 23.708, 28.576, 30.438 ],
		    [14.475, 17.226, 23.379, 28.922, 31.088 ],
		    [15.935, 18.693,...