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 () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                }
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                shared: true
            },
            plotOptions: {
                column: {
                    stacking: 'percent',
                   	pointPadding: 0.2,
					borderWidth: 0,
					dataLabels: {
                        enabled: true,								
                        crop: false,
                        overflow : 'none',                        
                        color: 'white',
                        verticalAlign: 'middle',
                        formatter : function () {
                           return   this.y + ' (' +Math.round((this.y /this.point.stackTotal)*100) + ')';
                        }
                    }
                }
            },
                series: [{
                name: 'John',
                data: [5, 3, 4, 7, 25]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 68]
            }]
        });
    });