JSFiddle - React, Tailwind, and code Playground

by santosh_patnala

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="width: 600px; float: left;"></div>

JavaScript

$(function() {
  $('#container').highcharts({
      chart: {
        type: 'gauge',
        /*plotBorderWidth: 0.5,
        plotBackgroundColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, '#FFF4C6'],
            [0.3, '#FFFFFF'],
            [1, '#FFF4C6']
          ]
        },
        plotBackgroundImage: null,*/
        height: 300,
        //marginBottom: 100
        //spacingTop:100
        //inverted: true
      },
      credits: {
        enabled: false
      },
      title: {
        text: 'VU meter - Santosh'
      },
      pane: [{
        startAngle: -90,
        endAngle: 90,
        background: null,
        center: ['50%', '100%'],
        size: 200
      }],
      tooltip: {
        enabled: false
      },
      yAxis: [{
        min: 0,
        max: 100,
        //minorTickPosition: '',
        //tickPosition: 'inside',
        minorTickLength: 0,
        tickLength: 0,
        labels: {
          //enabled: false,
          rotation: 'auto',
          distance: 20
        },
        plotBands: [{
          from: 0,
          to: 20,
          color: '#C02316',
          innerRadius: '60%',
          outerRadius: '100%'
        }, {
          from: 20,
          to: 80,
          color: '#FFE100',
          innerRadius: '60%',
          outerRadius: '100%'
        }, {
          from: 80,
          to: 100,
          color: '#74FF00',
          innerRadius: '60%',
          outerRadius: '100%'
        }],
        pane: 0,
        title: {
          text: 'Custom<br/><span style="font-size:8px">Text</span>',
          y: -100
        }
      }],
      plotOptions: {
        //crop: false,
        gauge: {
          dataLabels: {
            enabled: true
          },
          //verticalAlign: "top",
          dial: {
            radius: '80%'
          }
        }
      },
      series: [{
          data: [30],
          yAxis: 0,
        ...