JSFiddle - React, Tailwind, and code Playground

by AbhishekRohan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.js"></script>
  <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 () {

      Highcharts.chart('container', {

        chart: {
          type: 'solidgauge',
          height: '80%'
        },
        credits: {
          enabled: false
        },
        title: {
          text: 'Fabric Chart',
          style: {
            fontSize: '24px'
          }
        },

        tooltip: {
          borderWidth: 0,
          backgroundColor: 'none',
          shadow: false,
          style: {
            fontSize: '16px'
          }
        },

        pane: {
          startAngle: 180,
          endAngle: 540,
          background: [{ // Track for Move
            outerRadius: '112%',
            innerRadius: '88%',
            backgroundColor: "#ffffff",
            borderWidth: 0
          }, { // Track for Exercise
            outerRadius: '87%',
            innerRadius: '63%',
            backgroundColor: "#ffffff",
            borderWidth: 0
          }, { // Track for Stand
            outerRadius: '62%',
            innerRadius: '38%',
            backgroundColor: "#E4F3FE",
            borderWidth: 0
          }]
        },

        yAxis: {
          min: 0,
          max: 100,
          lineWidth: 0,
          tickPositions: []
        },

        plotOptions: {
          series: {
            enableMouseTracking: false
          },
          solidgauge: {
            dataLabels: {
              enabled: false
            },
            linecap: 'round',
            stickyTracking: false,
            rounded: false
          }
        },

        series: [{
          name: '',
          data: [{
            color: "#9ACAF1",
            radius: '112%',
            innerRadius: '88%',
            y: 40
          }]
        }, {
          name: '',
          data: [{
            color: "#4186C4",
            radius: '87%',
            innerRadius: '63%',
            y: 65
          }]
        }, {
          name: '',
          data: [{
            color: "#204C79",
            radius: '62%',
           ...