JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

CSS

A2B4BE

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Level of Loan Debt for 2013-2014 IU Bloomington Graduates'
        },
        xAxis: {
            categories: ['Resident', 'Non-Resident', 'Total']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'percent'
            }
        },
        series: [{
            name: '$75,000 +',
            color: '#142026',
            data: [1, 3, 2]
        },
                 {
            name: '$50,000-75,000',
            color: '#293F4B',
            data: [3, 1, 2]
        },
                 {
            name: '$40,000-50,000',
            color: '#365464',
            data: [4, 1, 3]
        }, 
                 {
            name: '$30,000-40,000',
            color: '#698797',
            data: [9, 2, 7]
        }, 
                 {
            name: '$10,000 - 20,000',
            color: '#8FA5B1',
            data: [11, 7, 9]
        }, {
            name: '$20,000-30,000',
            color: '#B4C3CB',
            data: [24, 15, 21]
        },
                 
                 {
            name: '$0-10,000',
            color: '#A2B4BE',
            data: [9, 4, 7]
        },
                 {
            name: 'None',
            color: '#C7D2D8',
            data: [40, 66, 49]
        },
          ]
    });
});