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'
            },
            title: {
                text: "F1 2013 Race - Pit stop summary"
            },
            xAxis: {
		categories: [ 'Australia', 'Malaysia', 'China', 'Bahrain', 'Spain', 'Monaco', 'Canada' ]
            },
            yAxis: {
                title: {
                    text: 'Seconds'
                },
		min: 15
            },
            credits: {
                text: 'Source: www.fia.com'
            },
            legend: {
                enabled: false
            },
	    tooltip: {
		shared: true
	    },
            plotOptions: {
                errorbar: {
		    stemColor: "#808080",
		    stemDashStyle: 'dashdot',
		    stemWidth: 2,
		    whiskerColor: '#808080',
		    whiskerWidth: 2,
		    whiskerLength: '20%'
                }
            },
            series: [{
		name: 'Pit stop time',
		type: 'column',
		data: [ 23.082, 27.646, 21.098, 22.976, 21.206, 26.428, 21.456 ]
            }, {
		name: 'error range',
		type: 'errorbar',
		data: [
		    [ 22.76, 23.404 ],
		    [ 25.316, 29.976 ],
		    [ 20.891, 21.305 ],
		    [ 22.639, 23.313 ],
		    [ 21.206 - 0.728, 21.206 + 0.728 ],
		    [ 26.428 - 0.802, 26.428 + 0.802 ],
		    [ 21.456 - 0.337, 21.456 + 0.337 ]
                ]

	   }]
        });

       });