JSFiddle - React, Tailwind, and code Playground

by Swapnil Navalakha

HTML

<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>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container-speed"></div>

JavaScript

$(function() {
  var gaugeOptions = {
    chart: {
      type: 'solidgauge',
      backgroundColor: "#ffffff",
      height: 220,
    },
    title: {
      text: "Audites",
      align: "left",
      style: {
        "padding": "10px 0",
        "font-size": "14px !important",
        "font-weight": "400",
        "color": "#3c3c3c",
        "line-height": "16px",
        "font-family": "'Open Sans', sans-serif !important;",
        "border-bottom": "1px solid #eeeeee"
      },
    },
    pane: {
      center: ['50%', '85%'],
      size: '120%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    tooltip: {
      enabled: false
    },
    yAxis: {
      stops: [
        [0.1, '#547df9'], // light blue
        [0.5, '#547df9'], // blue
        [0.9, '#547df9'] // dark blue
      ],
      lineWidth: 1,
      minorTickInterval: null,
      tickAmount: 2,
      title: {
        y: -70
      },
      labels: {
        y: 16
      }
    },
    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        }
      }
    }
  };

  // The speed gauge
  $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
      min: 0,
      max: 905,
      tickPositions: [0, 905],
      title: {
        text: ''
      }
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: true,
    },
    series: [{
      name: '',
      data: [900],
      dataLabels: {
        format: '<div style="text-align:center;"><span style="font-size:30px; font-family: Open Sans; color:' +
          ((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#000000') + '">{y}</span><br/><br/>' +
          '<span style="font-size:13px;font-weight:300; margin-top:20px;color:#000000">As at...