JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var gauge = {
  title:{text: "Gauge Chart"},
  data : { y: 7 }, //gauge value 
  maximum : 10
};

var chart = new CanvasJS.Chart("chartContainer") ;   
createGauge(chart);

//Function for gauge
function createGauge(chart){
  //Caluculation of remaining parameters to render gauge with the help of doughnut
  gauge.unoccupied = {
    y: gauge.maximum - gauge.data.y , 
    color: "#DEDEDE", 
    toolTipContent: null, 
    highlightEnabled: false,

    click : function (){ gauge.unoccupied.exploded = true; }
  }
  gauge.data.click = function (){ gauge.data.exploded = true; };


  if(!gauge.data.color)
    gauge.data.color = "#69C434";
  gauge.valueText = {text: gauge.data.y.toString(), verticalAlign :"center",fontSize:"40", fontFamily: "DIN Light" };

  var data = {
    type: "doughnut",
    indexLabelPlacement: "inside",
    innerRadius: "60%",
    dataPoints: [
      {
        y: 1,
        indexLabel: gauge.maximum + "",
        color: "transparent"
      },
      {
        y: gauge.maximum - 2,
        color: "transparent",
        toolTipContent: null
      },
      {
        y: 1,
        indexLabel: "0",
        color: "transparent"
      },
      gauge.data,
      gauge.unoccupied,
    ],
  };

  if(!chart.options.data)
    chart.options.data = [];
  chart.options.data.push(data);

  if(gauge.title){
    chart.options.title = gauge.title;
  }

  //For showing value
  if(!chart.options.subtitles)
    chart.options.subtitles = [];
  chart.options.subtitles.push(gauge.valueText);


  chart.render();
}