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

JavaScript

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

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'gauge'
            },
            title: {
                text: null
            },
            credits: { 
                enabled: false
            },
            yAxis: {
                min: 0,
                max: 2,
                allowDecimals: false,
                labels: {
                    rotation: 'auto',
                    formatter: function() {
                              switch(this.value) {
                                  case 0:
                                     //return '<span style="font-size:20;color:#CAE6F1">Good</span>';
                                     return 'Good';
                                  case 1:
                                     return '<span style="font-size:20">Bad</span>';
                                     //return 'Bad';
                                  case 2: 
                                     return 'Ugly';
                              }
                     },
                    style: {
                        fontFamily: 'Courgette',
                        fontSize: 16,
                        color: '#8C8C8C', //'#CAE6F1'
                    }
                },
                lineWidth: 0,
                minorTickLength: 0,               
                tickLength: 0,
                offset: 5 
            },
            pane: {
                startAngle: -60,
                endAngle: 60,
                background: [{ 
                   //backgroundColor: '#004A97',
                   backgroundColor: {
                       radialGradient: {
                           cx: 0.5,
                           cy: 0.7,
                            r: 0.25,
                       },
                       stops: [
                           [ 0.15, '#CCD5DE'...