JSFiddle - React, Tailwind, and code Playground

by Fusher

HTML

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

<div id="container" style="height: 300px"></div>

JavaScript

var colors = Highcharts.getOptions().colors;
var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'column'
    },

    xAxis: {
        categories: ['One', 'Two', 'Three']
    },
    plotOptions: {
        column: {
            stacking: 'percent',
        }
    },

    series: [{
         stack: 'Stack 1',
        data: [{
            name: 'Series 1',
            y: 10,
            color: colors[0],
        },null,null]               
    },{
        stack: 'Stack 1',
        data: [{
            name: 'Series 2',
            y: 30,
            color: colors[1],
        },null,null]                
    },{
        stack: 'Stack 2',
        data: [null,{
            name: 'Series 3',
            y: 50,
            color: colors[2],
        },null]               
    },{
        stack: 'Stack 2',
        data: [null,{
            name: 'Series 4',
            y: 50,
            color: colors[3],
        },null]                
    },{
        stack: 'Stack 3',
        data: [null,null,{
            name: 'Series 5',
            y: 20,
            color: colors[4],
        }]                
    },{
        stack: 'Stack 3',
        data: [null,null,{
            name: 'Series 6',
            y: 60,
            color: colors[5],
        }]                
    }]

});