JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js"></script>
<div id="chart1"></div>
<div id="chart2"></div>

JavaScript

function buildChart(container, data) {
    new Highcharts.Chart({
        chart: {
            renderTo: container
            ,type: "bar"
            ,zoomType: "y"
            ,height: "200"
        }
        ,title: {
            text: "Salary Buckets"
        }
        ,xAxis: {
            categories: ["Salary Bucket"]
        }
        ,yAxis: {
            min: 0
            ,title: {
                text: "Percentage of Employees"
            }
        }
        ,tooltip: {
            formatter: function() {
                return "$" + this.series.name + "k: " + this.y +' ('+ Math.round(this.percentage*100)/100 +'%)';
            }
        }
        ,plotOptions: {
            series: {
                stacking: "percent"
            }
        }
        ,legend: { enabled: false }
        ,series: data
    });
}

var data1 = [{"name":"20","data":[131]},{"name":"30","data":[575]},{"name":"40","data":[828]},{"name":"50","data":[224]},{"name":"60","data":[136]},{"name":"70","data":[39]},{"name":"80","data":[12]},{"name":"90","data":[7]},{"name":"100","data":[3]},{"name":"110","data":[2]},{"name":"120","data":[1]}];

var data2 = [{"name":"20","data":[175]},{"name":"30","data":[272]},{"name":"40","data":[93]},{"name":"50","data":[71]},{"name":"60","data":[88]},{"name":"70","data":[11]},{"name":"80","data":[5]},{"name":"90","data":[3]},{"name":"190","data":[1]}];

buildChart("chart1", data1);
buildChart("chart2", data2);
//buildChart("chart1", data1.reverse());
//buildChart("chart2", data2.reverse());