JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="container" style="height:400px;"></div>

JavaScript

var colors = Highcharts.getOptions().colors;
var chart = new Highcharts.Chart({
    chart: { renderTo: 'container', type: 'bubble', zoomType: 'xy' }, 
        title: { text: '' }, 
        credits: {enabled:false},
        plotOptions: { bubble: { showInLegend: false } },
        tooltip: {
            formatter: function() { 
                return this.point.name + '<br/>Aportación: ' + this.y + '<br/>Avance: ' + this.x + '%';
            }          
        },
        yAxis: { 
            title:{ text: 'No. Aportaciones' },
            min: 0
        }, 
    xAxis: { title:{ text: 'Avance (%)' }, max: 100, min: 50}, 
        series: [{ 
            dataLabels: { 
                style: { fontSize: 10 },
                enabled: true, 
                //rotation: -25,
                //formatter:function() {
                  //  return this.point.name;
                //}, 
                style:{color:'black'} 
            }, 
            name:'Aportaciones vs % Avance',
            data: [
                {color: colors[0],name:'IntegralChu',x:64.3,y:87,z:87},
                {color: colors[0],name:'AyinAlux',x:89.7,y:174,z:174},
                {color: colors[0],name:'IxtalManik',x:90,y:171,z:171}
            ] 
        }] 
}, function(chartObj) {
    $.each(chartObj.series[0].data, function(i, point) {
        var aux = 0;
        if (i % 2 == 0)
            aux = point.dataLabel.y + 6;
        else
            aux = point.dataLabel.y - 6;
        
        point.dataLabel.attr({y:aux});
    });
});