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>
<figure class="highcharts-figure">
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</figure>

JavaScript

Highcharts.chart("container", {
  chart: {
    type: 'solidgauge'
  },
  tooltip: {
    enabled: false
  },
  title: null,
  credits: {
    enabled: false
  },
  pane: {
    size: '100%',
    startAngle: -120,
    endAngle: 120,
    background: {
      innerRadius: '75%', 
      outerRadius: '100%',
      backgroundColor: '#eeeeee',
      borderWidth: 0,
      shape: 'arc'
    }
  },
  plotOptions: {
    solidgauge: {
      innerRadius: '75%',
      radius: '100%',
      dataLabels: {
        enabled: true,
        useHTML: true,
        zIndex: 1000  //added zindex
      }
    }
  },
  yAxis: {
    labels: {
      enabled: false
    },      
    min: 0,
    max: 100,
    gridLineColor: 'transparent',
    lineColor: 'transparent',
    minorTickLength: 0,
    tickPositions: [35],
    tickColor: '#000000',
    tickPosition: 'inside',
    tickLength: 50,
    tickWidth: 8,
    zIndex: 100, //added zindex
  },
  series: [{
    data: [40],
    dataLabels: {
            format: '<span style="font-size:25px">${y} M</span><br/>' 
        },
        tooltip: {
            valueSuffix: ' km/h'
        }
  }]
});