JSFiddle - React, Tailwind, and code Playground

by hitmax

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 500px; height: 600px;"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    }, 
    xAxis: [{
        categories: ['Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men', 'Women', 'Men' ],
        labels: {
            y: 40
        }
    }],
    legend: {
        margin: 40
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: [{
        name: 'Higher Education Sector',
        data: [['Women', 10965],['Women', 11835],['Men', 18074],['Men', 18519]]
    },{
        name: 'Business Enterprise Sector',
        data: [['Women', 4362],['Women',5260],['Men', 22320],['Men', 16682]]
    },{
        name: 'Government Sector',
        data: [['Women', 1355],['Women',1056],['Men', 18074],['Men', 2195]]
    },{
        name: 'Private Non Profit Sector',
        data: [['Women', 195],['Women',119],['Men', 280],['Men', 192]]
    }]
}, function(chart){
    $('.highcharts-axis:first > text').each(function() {
       this.setAttribute('y', parseInt(this.getAttribute('y')) - 20)
    });
    
    var text1 = chart.renderer.text("AT", 150, 520).add();
    var text2 = chart.renderer.text("BE", 350, 520).add();
});