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'
            }
        }, {
            linkedTo: 0,
            title: {
                text: 'Profit (millions)'
            },
            opposite: true
        }],
        plotOptions: {
        		legend: {
            hide: true,
            },
            	
            column: {
                stacking: 'normal',
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Background',
            data: 1.001*[440, 90, 40],
            pointPadding: 0.1,
            color: '#000000',
            stack: 'background'
        },

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