JSFiddle - React, Tailwind, and code Playground

by stefaniev

HTML

<script src="https://code.highcharts.com/6.0.0/highcharts.js"></script>
<script src="https://code.highcharts.com/6.0.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/6.0.0/modules/solid-gauge.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
  <div id="chart" style="width: 500px; height: 300px; float: left"></div>
</div>

JavaScript

$(function() {
  $('#chart').highcharts({
    chart: {
      backgroundColor: null //,
      //polar: false
    },
    plotOptions: {
      gauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        },
        pivot: {
          radius: 1
        },
        dial: {
          radius: '100%',
          baseLength: '0%',
          baseWidth: 3,
          rearLength: '0%',
          topWidth: 1
        },
        wrap: false
      },
      area: {
        lineColor: '#666666',
        lineWidth: 1,
        marker: {
          lineWidth: 1,
          lineColor: '#666666'
        },
        cursor: 'pointer'
      }
    },
    pane: [undefined,
      {
        startAngle: -90,
        endAngle: 90,
        background: null,
        size: "50%",
        center: ["80%", "75%"]
      }
    ],
    xAxis: [{
        type: "datetime",
        pane: 0
      },
      {
        pane: 1
      }
    ],
    yAxis: [{
        title: {
          text: "Views"
        },
        min: 0,
        pane: 0,
        type: "linear"
      },
      {
        pane: 1,
        labels: {
          enabled: false
        },
        tickPositions: [],
        minorTickLength: 0,
        min: -10,
        max: 10,
        plotBands: [{
          from: -10,
          to: 3,
          color: 'rgb(192, 0, 0)', // red
          thickness: '50%'
        }, {
          from: 3,
          to: 5,
          color: 'rgb(255, 192, 0)', // yellow
          thickness: '50%'
        }, {
          from: 5,
          to: 10,
          color: 'rgb(155, 187, 89)', // green
          thickness: '50%'
        }]
      }
    ],
    series: [{
        name: "Series 1",
        data: [3030, 2345, 1751, 1491, 1136, 1028, 901, 786, 664, 652, 621, 618, 708, 813, 823, 916, 986, 1093, 1197, 1441, 1791, 2301, 2941, 3905, 5525, 7687, 9779, 11749, 13077, 14243, 14688, 15195, 15125, 15251, 15105, 14721, 14311, 13289, 12290, 11631, 11151, 10167, 10120, 10446, 11030, 11396, 11611,...