JSFiddle - React, Tailwind, and code Playground

by ewolden

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

JavaScript

$("#progress").highcharts({
  chart: {
    inverted: true,
    marginLeft: 30,
    type: 'bullet'
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    tickPositions: [0, 3000, 3100, 4000],
    gridLineWidth: 0,
    title: "",
    labels: {
			staggerLines: 2
      //rotation: -45
    },
    
  },
  xAxis: {
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      borderRadius: 10,
      color: '#819bc2',
      targetOptions: {
        width: '10%'
      },
      grouping: false
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    "data": [{
      "y": 4000,
      "target": 4000,
      "color": "#ccd8e9"
    }]
  }, {
    "data": [{
      "y": 3100,
      "target": 3100,
      "color": "#ff4666"
    }]
  }, {
    "data": [{
      "y": 3000,
      "target": 3000,
      "color": "#2F9AD0"
    }]
  }],
  tooltip: {
    useHTML: true,
    backgroundColor: null,
    borderWidth: 0,
    positioner: function(labelWidth, labelHeight, point) {
      var tooltipX = point.plotX - 40;
      var tooltipY = point.plotY - 20;
      return {
        x: tooltipX,
        y: tooltipY
      };
    },
    pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
  }
});