JSFiddle - React, Tailwind, and code Playground

by Raul Corona Xolaltenco

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/solid-gauge.js"></script>

<div style="width: 600px; height: 400px; margin: 0 auto">
	<div id="container-speed" style=""></div>
	<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>

JavaScript

$(function () {

    
    var merge = Highcharts.merge;
	var perShapeGradient = {
            x1: 0,
            y1: 1,
            x2: 1,
            y2: 1
        };
	var vcolors = Highcharts.getOptions().colors;
    vcolors = [
        {	
        	linearGradient: merge(perShapeGradient),
            stops: [
                [0, 'rgb(248,255,232)'],
                [1, 'rgb(41,154,11)']
                
             ],
         },
         {
        	
         	linearGradient: merge(perShapeGradient),
             stops: [
                 [0, 'rgb(248,80,50)'],
                 [1, 'rgb(241,111,92)']
                 
              ],
          },
          {
        	
           	linearGradient: merge(perShapeGradient),
               stops: [
                       	[0, 'rgb(249,198,103)'],
                       	[1, 'rgb(221,164,17)']
                   
                ],
            },
            {
               	linearGradient: merge(perShapeGradient),
                   stops: [
                           	[0, 'rgb(157,213,58)'],
                           	[1, 'rgb(161,213,79)']
                       
                    ],
                }
          
     ];
    
    
    $('#container-speed').highcharts({

        chart: {
            type: 'solidgauge',
             backgroundColor: null,
             enableMouseTracking:true,
            borderWidth: 1,
            plotBorderWidth: 0,
            marginBottom: 100,
            
        },  legend: {
            enabled: true,
            align: 'right',
           
        },
       
        
         
        title: 'asdasdadasdasdasdasdasdas',

        pane: {
            center: ['50%', '85%'],
           /* size: '100%',*/
            startAngle: -90,
            endAngle: 90,
            background: {
                /*backgroundColor: 'rgba(10,10,10, 0.7)',*/
                backgroundColor:'black',
                innerRadius: '60%',
                outerRadius: '100%',
               ...