JSFiddle - React, Tailwind, and code Playground

by Sascha

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>

<div style="width: 800px; height: 500px; margin: 0 auto">
	<div id="container-speed" style="width: 500px; height: 400px; float: left"></div>
</div>

CSS

T

JavaScript

$(function() {
  var gaugeOptions = {
    chart: {
      type: "solidgauge"
    },

    title: null,

    pane: {
      center: ["50%", "50%"],
      size: "100%",
      startAngle: 0,
      endAngle: 360,
      background: {
        innerRadius: "75%",
        outerRadius: "100%",
        shape: "arc"
      }
    },

    tooltip: {
      enabled: false
    },

    // the value axis
    yAxis: {
      stops: [
        [0.1, "#55BF3B"], // green
        [0.5, "#DDDF0D"], // yellow
        [0.9, "#DF5353"] // red
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickPixelInterval: 400,
      tickWidth: 0,
      title: {
        y: 0
      },
      labels: {
        enabled: false
      }
    },

    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: -50,
          borderWidth: 0,
          useHTML: true
        },
        linecap: "round",
        stickyTracking: false,
        rounded: true
      }
    }
  };

  // The speed gauge
  $("#container-speed").highcharts(
    Highcharts.merge(gaugeOptions, {
      xAxis: {
        min: 0,
        max: 200,
        title: {
          // text: "Speed"
        }
      },

      credits: {
        enabled: false
      },

      series: [
        {
          name: "OL/min",
          data: [{y: 80, color: "#DF5353" }],
          
          innerRadius: "75%",
          dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:2rem">{y}<br/>{series.name}</span><br/></div>'
          }
        }
      ]
    })
  );
});