JSFiddle - React, Tailwind, and code Playground

by AbhishekRohan

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: 300
        },
        title: {
            text: null
        },
        exporting: {
          enabled: false
        },
        xAxis: {
            categories: ['Chart 1'],
            labels: {
            	enabled: false
            },
            gridLineWidth: 0,
            lineColor: 'transparent',
            tickColor: 'transparent'
        },
        yAxis: {
       		 visible: true,
           offset: 5,
           title: {
           	text: null
           },
           gridLineWidth: 0,
          plotLines: [{
            color: '#606060',
            width: 1,
            value: 0
          }],
          labels: {
          	enabled: true
          }
        },
        credits: {
            enabled: false
        },
        legend: {
       			 enabled: false
        },
        plotOptions: {
        	column: {
            threshold: 0,
          	dataLabels: {
            	enabled: true,
              formatter: function() {
              		return this.y < 0 ? -(this.y) + '%' : this.y + '%';
              }
            }
          }
        },
        series: [{
            name: '50%+',
            data: [5],
            color: 'green'
        }, {
            name: '25-49%',
            data: [13],
            color: 'green'
        }, {
            name: '11-24%',
            data: [18],
            color: 'green'
        }, {
            name: '5-10%',
            data: [12],
            color: 'green'
        }, {
            name: '<5%',
            data: [4],
            color: 'green'
        }, {
            name: 'Flat',
            data: [22],
            color: 'blue'
        }, {
            name: 'Flat',
            data: [-22],
            color: 'blue'
        },{
            name: '<5%',
            data: [-4],
            color: 'orange'
        },{
            name: '5-10%',
           ...