JSFiddle - React, Tailwind, and code Playground

by andrey90vs

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="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {
	
    $('#container').highcharts({
	
	    chart: {
	        type: 'gauge',
	        plotBackgroundColor: null,
	        plotBackgroundImage: null,
	        plotBorderWidth: 0,
	        plotShadow: false
	    },
	    
	    title: {
	        text: 'Speedometer'
	    },
	    
	    pane: {
	        startAngle: -90,
	        endAngle: 90,
          background: null
	    },
        
      plotOptions: {
        gauge: {
          dataLabels: {
            enabled: false
          },
          pivot: {
          	backgroundColor: '#c3c8d5'
          },
          dial: {
          	backgroundColor: '#c3c8d5',
            baseLength: 0,
            baseWidth: 10,
            radius: '100%',
            rearLength: '0%',
            topWidth: 1
          }
        }
      },
	       
	    // the value axis
	    yAxis: {
        labels: {
          enabled: true,
          x: 0,
          y: 0
        },
        lineColor: 'transparent',
        tickColor: '#c3c8d5',
        tickWidth: 8,
        tickLength: 8,
        tickPositions: [60,70,80],
        minorTickLength: 8,
        minorTickWidth: 8,
        minorTickColor: '#c3c8d5',
        min: 60,
        max: 80,
        lineColor: 'transparent',
        plotBands: [{
            from: 60,
            to: 80,
            thickness: 0
	       },{
             from: 60,
             to: 62,
             color: '#ff1f1f',
             thickness: 8
	        },{
	            from: 69,
	            to: 71,
	            color: '#21c45b',
              thickness: 8
	        },{
	            from: 78,
	            to: 80,
	            color: '#ff1f1f',
              thickness: 8
	        }]        
	    },
	
	    series: [{
	        name: 'Speed',
	        data: [77]
	    }]
	});
});