JSFiddle - React, Tailwind, and code Playground

by duffn

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>
<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container" style="width: 300px; height: 200px; float: left"></div>
</div>

JavaScript

$('#container').highcharts({
  chart: {
    type: 'solidgauge'
  },
  title: {
    text: 'Average Visitors'
  },
  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
yAxis: {
    min: 0,
    max: 40000,
    title: {
      text: 'Speed',
      y: -70
    },
    stops: [
      [0.1, '#55BF3B'], // green
      [0.5, '#DDDF0D'], // yellow
      [0.9, '#DF5353'] // red
    ],
    lineWidth: 0,
    minorTickInterval: null,
    tickPixelInterval: 400,
    tickWidth: 0,
    labels: {
      y: 16
    }
  },
  series: [{
    "data": [29655.88482666]
  }]
});