JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="speedometer">
  <div id="speedometer__background" class="canvas" style="height: 500px; width: 500px;"></div>
    <canvas id="speedometer__value" class="canvas" width="500" height="500"></canvas>
 <div class="speedometer__needle js-needle">
 </div>
</div>

CSS

body {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #222A31;
}

.speedometer__needle {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  top: 72%;
  left: 50%;
  transition: .3s ease-in-out;
  transform: translate(-50%, -50%) rotate(0deg);
  margin: 8px 0 0;
}

.speedometer__needle:before {
  content: '';
  position: absolute;
  border-radius: 5px;
  border: 6px solid transparent;
  border-right: 100px solid #FFF;
  left: -220px;
  top: 6px;
  width: 0;
  height: 0;
}

.canvas {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

JavaScript

var tickValue = 5;


var chart = new CanvasJS.Chart( 'speedometer__background', {
  backgroundColor: null,
  interactivityEnabled: false,
  data: [
    {
      type: 'doughnut',
      dataPoints: [
        {
          y: 1,
          color: 'green'
        },
        {
          y: 1,
          color: 'yellow'
        },
        {
          y: 1,
          color: 'red'
        }
      ]
    }
  ]
});

function makeSpeedometer( chart ) {
  var sum = 0, 
  dataPoints = chart.options.data[0].dataPoints;

  for ( var i = 0; i < dataPoints.length; i++ ) {
    sum += dataPoints[i].y;
  }

  dataPoints.splice( 0, 0, { // Hides bottom half of the chart.  This needs CSS to set the overflow to hidden
    y: sum,
    color: "transparent",
    toolTipContent: null,
    highlightEnabled: false
  });
}

if(!chart.options.subtitles)
    chart.options.subtitles = [];
  chart.options.subtitles.push({text: tickValue + "%", verticalAlign :"center", fontColor: "white"});

$( '.js-needle' ).css({
  'transform' : 'translate(-50%, -50%) rotate('+  (tickValue * 18.0) + 'deg)'
});

makeSpeedometer( chart );
chart.render();