JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="11" style="width: 200px; height: 200px; margin: 0 auto">
</div>

JavaScript

$(function () {

	var N=2
  var brcolor = []
  var tl = []
  var frcolor = []
  var rd = []
  var gg = []
  
  brcolor[1] = '#666666'
  brcolor[2] = '#666666'
  
  tl[1] = 'name1'
  tl[2] = 'name2'

	frcolor[1] = '#666666'
  frcolor[2] = '#666666'
  
  rd[1] = '109%'
  rd[2] = '96%'
  
  gg[1] = 80
  gg[2] = 65

	if (!Highcharts.theme) {
		Highcharts.setOptions({
		    chart: {
		        backgroundColor: 'rgba(255,255,255,0.002)'
		    },
		    colors: ['#666666', '#666666', '#666666', '#666666', '#666666', '#666666', '#666666'],

		    tooltip: {
		        style: {
		            color: '#a0a0a0'
		        }
		    }
		});
	}
	

	Highcharts.chart('11', {

		chart: {
		    type: 'solidgauge',
		    margin: [0, 0, 0, 0]

		},

		title: {
		    text: '',
		    style: {
		        fontSize: '12px'
		    }
		},

		tooltip: {
		    borderWidth: 1,
		    backgroundColor: 'white',
		    shadow: false,
		    useHTML: true, 
            style: {
                fontSize: '14px',
                fontFamily: 'arial',
                direction: 'rtl'
		    },
            pointFormat: '<div style="width: 120px; white-space:normal; text-align: right">{series.name}</div><div style="text-align: center"><span style="font-size:1.3em; font-weight: bold; color: {point.color}; ">{point.y}%</span></div>'
		    // positioner: function (labelWidth, labelHeight) {
		        //   return {
		        //     x: 120 - labelWidth / 2,
		        //      y: 20
		        //  };
		    // }
		},

		pane: {
		    startAngle: 0,
		    endAngle: 280,
		    background: [{ 
		        outerRadius: '112%',
		        innerRadius: '106%',
		                    
		        backgroundColor: '#eeeeee',
		        borderWidth: 1
		    }, { 
		        outerRadius: '99%',
		        innerRadius: '93%',
		                  
		        backgroundColor: '#eeeeee',
		        borderWidth: 1
		    }]
		},

		yAxis: {

		    min: 0,
		    max: 100,
		    lineWidth: 0,
		    tickPositions: []
		},
		credits: {
		    enabled:...