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/modules/exporting.js"></script>

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

JavaScript

$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column',
            width: 700,
            height: 400
        },
        title: {
            text: null
        },
        exporting: {
          enabled: false
        },
        xAxis: {
            categories: ['50%+','25-49%','11-24%','5-10%','<5%','Flat','Flat','<5%','5-10%','11-24%','25-49%','50%+'],
            labels: {
            	enabled: true,
              y: 50
            },
            gridLineWidth: 0,
            lineColor: 'transparent',
            tickColor: 'transparent',
            plotLines: [{
              color: 'white',
              width: 15,
              value: 5.5,
              zIndex: 6
            }]
        },
        yAxis: {
       		 visible: true,
           offset: 5,
           title: {
           	text: null
           },
           gridLineWidth: 0,
          plotLines: [{
            color: 'Red',
            width: 10,
            value: 0,
            zIndex: 5
          }],
          labels: {
          	enabled: false
          }
        },
        credits: {
            enabled: false
        },
        legend: {
       			 enabled: false
        },
        plotOptions: {
        	column: {
            pointWidth: 25,
          	dataLabels: {
            	enabled: true,
              formatter: function() {
              		return this.y < 0 ? -(this.y) + '%' : this.y + '%';
              }
            }
          }
        },
        series: [{
            data: [5, 13, 18, 12, 4, null, null, null, null, null, null, null],
            color: '#9CC346'
        },
        {
            data: [null, null, null, null, null, 22, -22, null, null, null, null, null],
            color: 'white',
            borderColor:'#33A2CD',
            borderWidth: 3
        },
        {
            data: [null, null, null, null, null, null, null, -4, -12, -18, -13, -5],
            color: '#FF9033'
        }]
    });
});