JSFiddle - React, Tailwind, and code Playground

by Nalin Sajwan

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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
    $(document).ready(function() {

        var myData = {
            "chart": {
                "renderTo": "container",
                "type": "columnrange",
                "inverted": true
            },
            "title": {
                "text": "Bullet Chart"
            },
            "subtitle": {
                "text": "Click on data series to drill down. Click 'Back' to go back up."
            },
            "lang": {
                "drillUpText": "<< Back"
            },
            "xAxis": {
                "type": "category"
            },
            "yAxis": {
                "max": 5,
                "allowDecimals": false,
                "labels": {},
                "title": {
                    "text": ""
                }
            },
            "tooltip": {
                "useHTML": true,
                formatter: function() {
                  // console.log(this);
                  if (this.series.type == 'bar') {
                    var s = false
                    }
                  else if (this.series.type == 'columnrange') {
                    var s = '<span><b>'+this.series.name+' - '+this.key + '</b></br>Average: '+ this.point.average + '</br>Range: '+this.point.low + ' - '+ this.point.high +'</span>'; 
                  }
                  else {
                    var s = '<span><b>'+this.series.name+' - '+this.key + ':</b></br>Average: '+this.point.y;
                  }

                  return s;
                }
            },
            "series": [
                {
                    "type": "columnrange",
                    "inverted": true,
                    "name": "Filter 1",
                    "id": "1",
                    "data": [
                        {
                            "name": "Category 1",
                            "low": 1,
                            "average": 1.5,
                            "high": 2,
                            "benchmark": [
        ...