JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

CSS

#container {
  width: 400px;
  height: 100px;
  margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
  "chart": {
    "type": "lineargauge",
    "inverted": true,
    "animation": false,
    "width": null,
    "height": null,
    "backgroundColor": "transparent",
    "events": {}
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "visible": true,
    "lineWidth": 0,
    "tickWidth": 0,
    "labels": {
      "enabled": true,
      "style": {
        "color": "transparent"
      }
    }
  },
  "yAxis": [{
    "endOnTick": false,
    "startOnTick": false,
    "min": 6.68,
    "max": 2720,
    "lineWidth": 0,
    "lineColor": "#ccd6eb",
    "offset": 5,
    "gridLineWidth": 0,
    "format": [
      null
    ],
    "tickWidth": 0,
    "tickColor": "#ccd6eb",
    "labels": {
      "enabled": false,
      "step": 0,
      "style": {
        "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial, sans-serif",
        "fontSize": "12px",
        "color": "#777777"
      },
      "autoRotation": [
        0
      ]
    },
    "title": {
      "text": "",
      "style": {
        "color": "#777777",
        "fontSize": "12px",
        "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial, sans-serif"
      }
    },
    "plotBands": [{
        "from": 6.68,
        "to": 2720,
        "color": "#f3f2f1",
        "borderColor": "#f3f2f1",
        "borderWidth": 1
      },
      {
        "from": 6.68,
        "to": 816,
        "color": "#67d4cc",
        "borderColor": "#67d4cc",
        "borderWidth": 1
      }
    ],
    "scalingFactor": ""
  }],
  "legend": {
    "enabled": false
  },
  "tooltip": {
    "useHTML": true,
    "enabled": true,
    "animation": false,
    "style": {
      "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial, sans-serif",
      "fontSize": "12px",
      "color": "#777777"
    }
  },
  "plotOptions": {
    "series": {
      "animation": false
    }
  },
  "series": [
  {
      "selectionId": {
        "measures": [
          "Sum(Advanced_Data Source_Self.Value 1)"
       ...