JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

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="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>

JavaScript

$(function() {
  var intervalChecker = true,
    globalDataLabels = {
      enabled: true,
      borderWidth: 0,
      y: -35,
      style: {
        fontSize: '22px'
      },
      formatter: function() {
        var seriesName = this.series.name,
          pointsValue = this.y,
          pointsColor = this.point.color;

        return seriesName + '<br><span style="color: ' +
          pointsColor + '">' + pointsValue + '%</span>';
      }
    };

  Highcharts.chart('container', {
      chart: {
        type: 'solidgauge',
        marginTop: 50,
        events: {
          load: function() {
            var chart = this,
              series = chart.series,
              seriesLength = series.length,
              seriesNumber = 0;

            progressInterval = setInterval(function() {
              if (intervalChecker) {
                if (seriesNumber !== seriesLength) {
                  var point = series[seriesNumber].points[0],
                    pointsValue = point.yValue;

                  dynamicDataLabels(chart, point, pointsValue, 2000);
                  seriesNumber++;

                } else {
                  series[seriesNumber - 1].update({
                    dataLabels: globalDataLabels
                  });
                  clearInterval(progressInterval);
                }
              }
            }, 1);
          }
        }
      },
      title: {
        text: 'Activity',
        style: {
          fontSize: '24px'
        }
      },
      tooltip: {
        enabled: true,
        shape: 'square',
        style: {
          fontSize: '12px'
        },
        pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
        positioner: function(labelWidth) {
          return {
            x: 314,
            y: 20
          };
        }
      },
      pane: {
        startAngle: 0,
        endAngle: 360,
        background: [{ // Track for Move
          outerRadius:...