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>
	<body>
  <div>
    <div id="container"></div>
  </div>
	</body>

JavaScript

$(document).ready(function() {
    document.title = "Highcharts " + Highcharts.version;

      var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                polar: true
            },
            title: {
                text: 'Web browsers statistics'
            },
            credits: {
                enabled: false
            },
            subtitle: {
                text: null
            },
            xAxis: {
                categories: [ 
                              'Jan 2011', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                ],
                tickmarkPlacement: 'on',
                labels: {
                    rotation: 'auto',
                },
	              lineWidth: 0,
                plotBands: [{
                    from: 10,
                    to: 11,
                    color: '#FF0000',
                }]
            },
            yAxis: {
                title: {
                    text: 'null'
                },
                gridLineInterpolation: 'polygon',
	              lineWidth: 0,
                min: 0,
                gridLineWidth: 2,
                minorTickInterval: 5,
                tickInterval: 10,
                minorGridLineWidth: 0,
                alternateGridColor: '#e6e7ff'
            },
            plotOptions: {
                series: {
                    lineWidth: 2
                }
            },
            series: [{
                name: 'Internet Explorer',
                data: [
                       26.6, 26.5, 25.8, 24.3, 24.9, 23.2, 22.0, 22.4, 22.9, 21.7, 21.2, 20.2,
                      ]
            }, {
                name: 'FireFox',
                data: [
                       42.8, 42.4, 42.2, 42.9, 42.4, 42.2, 42.0, 40.6, 39.7, 38.7, 38.1, 37.7,
                      ]
            }, {
                name: 'Chrome',
                data: [ 
        ...