JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>

JavaScript

$('#container').highcharts({
				chart: {
					type: 'gauge',
					alignTicks: false,
					plotBackgroundColor: null,
					plotBackgroundImage: null,
					plotBorderWidth: 0,
					plotShadow: false,
          events: {
        load: function() {
        console.log(this.yAxis[0].ticks);
          this.yAxis[0].ticks[-300].label.translate(0, 100);
        }
      }
				},
				
				title: {
					text: null
				},
				
				tooltip: {
					enabled: false
				},

				pane: {
					startAngle: -70,
					endAngle: 70,
					background: null
				},
				
				plotOptions: {
					gauge: {
						dial: {
							baseWidth: 2,
							baseLength: '100%',
							radius: '100%',
							rearLength: 0
						},
						pivot: {
							radius: 5
						},
						dataLabels: {
							enabled: false
						}
					}
				},

				yAxis: [ {
					min: -300,
					max: 500,
                    tickPositions: [-300, -200, -100, 0, 100, 200, 300, 400, 500],
					lineColor: '#933',
					lineWidth: 0,
					minorTickPosition: 'outside',
					tickLength: 0,
					minorTickLength: 0,
					labels: {
                        formatter: function() {
                            if(this.value == -300) 
                            return '-300 => Text 1';
                          
                            if(this.value == -200) return '-200 => Text 2';
                            if(this.value == -100) return '-100 => Text 3';
                            return this.value;
                        },
						distance: 12,
						//rotation: 'auto'
					},
					//categories: ['Grunder'],
					offset: 0,
					plotBands: [{
						from: -300,
						to: 2,
						thickness: 15,
						color: '#55BF3B'
					}, {
						from: 0,
						to: 202,
						thickness: 15,
						color: {
							linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
							stops: [
								[0, '#55BF3B'], //green
								[1, '#DDDF0D'] //yellow
							]
						}
					}, {
						from: 200,
						to: 500,
						thickness: 15,
						color:...