JSFiddle - React, Tailwind, and code Playground

by nancynancy

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Employees'
            }
        }],
        plotOptions: {
            column: {
                stacking: 'normal',
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Background',
            data: [650, 300, 263],
            pointPadding: 0.1,
            color: '#000000',
            stack: 'background'
        },

        {
            name: 'Foreground',
            data: [440, 90, 40],
            pointPadding: 0.13,
            color: '#E69617',
            stack: 'foreground'
        }, {
            name: 'Foreground',
            data: [203.6, 198.8, 208.5],
            pointPadding: 0.13,
            color: '#17B2E6',
            stack: 'foreground'
        }]
    });
});