JSFiddle - React, Tailwind, and code Playground

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: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples','Oranges','Pears','Grapes','Bananas','Mangos','Avocados']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
                ,
         		dataLabels: {
                		 overflow: 'none',
            				crop: false,
                    enabled: true,
              			format: '{point.y:.2f}%',
                    allowOverlap:true
                }
            },
        column: {
            stacking: 'normal',
            borderWidth: 0
        }
        },
                series: [{
            name: 'Germany',
            data: [0.7,3,4.6,12.43,2.07,3.37,3.39]
        }, {
            name: 'Spain',
            data: [1.37,1.47,1.36,2.29,0.3,0.9,2.1]
        },{
            name: 'England',
            data: [0.22,0.8,0.02,0.08,0.013,0.5]
        },{
            name: 'Denmark',
            data: [1.4,1.0,1.3,0.5,27.3,1.07,1.4]
        },{
            name: 'Italy',
            data: [6.6,1.8,3.5,3.9,21.13,1.05,5.6]
        },{
            name: 'France',
            data: [0.03,0.016,3.2,0.025,0.244]
        }]
    });
});