JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="height:300px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 400px; min-width: 500px"></div>

JavaScript

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Others']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    legend: {
        backgroundColor: '#FFFFFF',
        reversed: true
    },
    tooltip: {
        formatter: function() {
            return '' + this.series.name + ': ' + this.y + '';
        }
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        },
        scatter: {
            dataLabels: {
                enabled: true,
                align: 'right',
                color: 'black',
                x: 18,
                y: 4
            }
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4]},
    {
        name: 'Jane',
        data: [2, 2, 3]},
    {
        name: 'Joe',
        data: [3, 4, 4]},
    {
        name: 'avarage',
        type: 'scatter',
        zIndex: 25,
        color: 'black',
        marker: {
            symbol: 'square',
            radius: 5
        },
        data: [[0, 2], [1, 4], [2, 6]]}]
});