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/solid-gauge.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />
<figure class="highcharts-figure">
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; mahttps://questionpro.zoom.us/s/94548213524rgin: 0 auto"></div>
</figure>

CSS

.highcharts-series-1 .highcharts-dial {
  fill: #999;
  /*stroke: rgb(0, 0, 0);
  stroke-width: 0 10 0 0;
  stroke-dasharray: 7;
  stroke-dashoffset: 5;*/
}

JavaScript

$(function () {
	  $('#container').highcharts({
        chart: {
          type: 'gauge',
          plotBackgroundColor: null,
          plotBackgroundImage: null,
          plotBorderWidth: 0,
          plotShadow: false
        },
        tooltip: {
          useHTML: true,
          //headerFormat: '<table>',
          pointFormat: '<span>-12 NPS</span><br>' +
          '<span>Benchmark: 50 NPS</span><br>' +
          '<span>Difference: -62 NPS</span><br>',
          //footerFormat: '</table>',
          valueDecimals: 2
        },
        credits: {
            enabled: false
        },
        title: {
          text: null
        },
        yAxis: {
          stops: [
            [1, '#255081']
          ],
          min: -100,
          max: 100,
          plotBands: [{
            from: -100,
            to: 0,
            thickness: '5%',
            color: '#ce002a', //red
            events: {
              click: function(e) {
                alert('red');
              },
              mouseover: function() {
                let chart = this.axis.chart;
                if (chart.customLabel) {
                  chart.customLabel.destroy();
                }
                chart.customLabel = chart.renderer.label(
                  '<div class="tooltip" style="color:#333;">' + 'Detractors ' + this.options.from + '</div>',
                  160,
                  70,
                  false,
                  true
                )
                  .attr({
                  fill: 'rgba(206, 0, 42, 0.2)',
                  padding: 8,
                  r: 0,
                  zIndex: 6
                })
                  .add()
              },
              mouseout: function(e) {
              	
              }
            },
          }, {
            from: 0,
            to: 50,
            thickness: '5%',
            color: '#ffe300', //yellow
            events: {
              click: function(e) {
                alert('yellow');
            ...