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 ausData = [ { x:1, y:1 },
                   { x:2, y:24, out:{num:2,names:['john','doe']} },
                   { x:3, y:5 },
                   { x:4, y:8 },
                   { x:5, y:22, out:{num:4,names:['A','B','C'] }},
                    { x:6, y:11,out:{num:2,names:['D','E'] } } ];
    for (var p in ausData) {
        var point = ausData[p];
        if (point.out !== undefined) {
            point.marker = {fillColor:'red',radius:3*point.out.num};
            
        } else {
            point.marker = {radius:5};
        }
    }
    $('#container').highcharts({
        title: {
            text: 'Austrlia Vs India',
            x: -20 //center
        },
        tooltip: {
            formatter: function () {
                var text = 'Over: ' + this.x +
                    ' Runs: ' + this.y;
                if (this.point.out !== undefined) {
                    text = text + '<br>Out: ' + this.point.out.num;
                    for (var n in this.point.out.names) {
                        text = text + ' ' + this.point.out.names[n];
                    }
                }
                return text;
            }
        },
        xAxis: {
           
        },
        yAxis: {
            title: {
                text: 'Runs'
            },
            
        },
        series: [{
            name: 'AUS',
            data: ausData
        }, {
            name: 'IND',
            data: [ [ 1, 5 ], [ 2, 12 ], [ 3, 12 ], [ 4, 19 ], [ 5, 11 ], [ 6, 8 ] ]
        }]
    });
});