JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div>
<div id="tooltipholder">I'm a tooltip</div>

JavaScript

$(function () {       
    $('#container').highcharts({
	
	    chart: {
	        type: 'gauge',
	        plotBackgroundColor: '#eee',
	        plotBackgroundImage: null,
	        plotBorderWidth: 0,
	        plotShadow: false
	    },
	    
	    title: {
	        text: 'Margin'
	    },
	    
	    pane: {
	        startAngle: -90,
	        endAngle: 90,
            borderWidth: 1,
            background: [{
	            backgroundColor: '#fff',
	            borderWidth: 0,
	            outerRadius: '100%',
	            innerRadius: '88%'
	        }]
	    },
	       
	    // the value axis
	    yAxis: {
	        min: 0,
	        max: 591948,
            tickPositions: [0, 255614, 462198, 591948],
            lineColor: '#3A3A3A',
            tickColor: '#3A3A3A',
            minorTickColor: '#c0c0bc',
	        minorTickPosition: 'outside',
	        tickPosition: 'outside',
	        tickLength: 0,
	        minorTickInterval: 'auto',
	        tickWidth: 4,
	        minorTickLength: 8,
	        minorTickWidth: 0,
            offset: -13,
            lineWidth: 0,

	        tickColor: '#666',
	        labels: {
                distance: 50,
	            step: 0,
	            rotation: 0,
                style: {
                    color: 'red',
                    fontWeigth: 'normal'
                }
	        },
	        plotBands: [{
	            from: 255614,
	            to: 462198,
                events: {
                    mouseenter: function(e) {
                        $('#tooltipholder').html('You are hovering yellow plotband, get ready!');
                        console.log('mouseenter');
                    },
                    mouseleave: function() {
                        $('#tooltipholder').html('');
                    }
                },
                innerRadius: 80,
                outerRadius: 116,
	            color: '#FFFF99' // yellow
	        }, {
	            from: 462198,
	            to: 591948,
                events: {
         ...