JSFiddle - React, Tailwind, and code Playground

by Fusher

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="output-chart"></div>

JavaScript

$('#output-chart').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: null
    },
    xAxis: {
        categories: ['Column 1', 'Column 2', 'Column 3', 'Column 4']
    },
    yAxis: {
        allowDecimals: false,
        min: 0,
        labels: {
            format: 'ÂŁ{value}'
        },
        title: {
            text: ''
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        },
        series: {
            //pointWidth: 50,
            pointPadding: 0,
            //groupPadding: 0
        }
    },
    series: [{
        name: 'Product 1 Element 1',
        data: [0, 100 - 125, 100 - 150, 100 - 175],
        stack: 'Item1'
    }, {
        name: 'Product 1 Element 2',
        data: [100, 125, 150, 175],
        stack: 'Item1'
    }, {
        name: 'Product 2 Element 1',
        data: [0, 100 - 125, 100 - 150, 100 - 175],
        stack: 'Item2'
    }, {
        name: 'Product 2 Element 2',
        data: [100, 125, 150, 175],
        stack: 'Item2'
    }]
});