JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    
    
     var data = [
        {label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
        {label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
        {label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
    ];
    
    
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
           // categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                       dataLabels: {
                    enabled: true,
                    color: 'white', 
                        formatter: function () {
                           return "random"
                        }
                }
            }
        },

        series: data
    });
});