JSFiddle - React, Tailwind, and code Playground

by Mert Karakus

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="column1" class="chart-column" style=""></div>

CSS

.chart-column {
  width: 100%;
  height: 100px;
}

.chart-column .highcharts-title {
  left: 0!important;
  top: 0!important;
  width: 100%!important;
}

JavaScript

$(function() {
  var settings = {
    tickInterval: 1000,
    minValue: 0,
    maxValue: 8000,
    updateInterval: 1000
  };

  $('#column1').highcharts({
    chart: {
    	inverted: true,
      type: 'column',
      spacing: [0, 5, 15, 5],
    },
    
    plotOptions: {
      column: {
        animation: false,
        stacking: 'normal'
      },
      series: {
        borderWidth: 0,
        pointRange: 1,
        pointPadding: 0,
        groupPadding: 0
      }
    },
    xAxis: {
    	min: 0,
      max: 0,
      minPadding: 0,
      maxPadding: 0,
      visible: false,
    },
    yAxis: {
      plotBands: [{
        from: 0,
        to: 2500,
        color: '#FB8585'
      }, {
        from: 2500,
        to: 5500,
        color: '#F9E7AE'
      }, {
        from: 5500,
        to: 8000,
        color: '#83DAD9'
      }],
      tickInterval: settings.tickInterval,
      opposite: true,
      ceiling: settings.maxValue,
      min: settings.minValue,
      gridLineWidth: 0,
      title: {
        text: ''
      },
      stackLabels: {
        enabled: false
      },
      labels: {
        useHTML: true,
        formatter: function() {
          return '<span class="column-yaxis-label">' + this.value + '</span>';
        }
      }
    },
    legend: false,
    tooltip: false,
    series: [{
      data: [{
        y: 3600,
        color: "#666666"
      }]
    }],
    credits: false
});
});