JSFiddle - React, Tailwind, and code Playground

by gokninski

HTML

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

JavaScript

$(document).ready(function() {
    $('#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'                    
            }]
        });
});