JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

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>

<div id="container" style="=width: 210px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'columnrange',
      width: 700,
      height: 300
    },
    title: {
      text: null
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      categories: ['Chart 1'],
      labels: {
        enabled: false
      },
      gridLineWidth: 0,
      lineColor: 'red',
      tickColor: 'red'
    },
    yAxis: {
      visible: true,
      offset: 5,
      title: {
        text: null
      },
      gridLineWidth: 0,
      plotLines: [{
        color: '#606060',
        width: 1,
        value: 0
      }],
      labels: {
        enabled: false
      }
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      columnrange: {
        threshold: 0,
        dataLabels: {
          enabled: true,
          formatter: function() {
            return this.y < 0 ? -(this.y) + '%' : this.y + '%';
          }
        }
      }
    },
    series: [{
      name: '50%+',
      data: [
        [5, 10]
      ],
      color: 'green'
    }, {
      name: '25-49%',
      data: [
        [13, 26]
      ],
      color: 'green'
    }, {
      name: '11-24%',
      data: [
        [18, 36]
      ],
      color: 'green'
    }, {
      name: '5-10%',
      data: [
        [12, 24]
      ],
      color: 'green'
    }, {
      name: '<5%',
      data: [
        [4, 8]
      ],
      color: 'green'
    }, {
      name: 'Flat',
      data: [
        [22, 44]
      ],
      color: 'blue'
    }, {
      name: 'Flat',
      data: [
        [-44, -22]
      ],
      color: 'blue'
    }, {
      name: '<5%',
      data: [
        [-8, -4]
      ],
      color: 'orange'
    }, {
      name: '5-10%',
      data: [
        [-24, -12]
      ],
      color: 'orange'
    }, {
      name: '11-24%',
      data: [
        [-36, -18]
      ],
      color: 'orange'
    }, {
      name: '25-49%',
      data: [
        [-26, -13]
      ],
      color: 'orange'
    }, {
 ...