Highchart: Bubble heading is not showing if two bubbles intersect or comes near one another in Bubble chart

Question

In Highcharts Bubblechart if i two bubbles comes near one another or intersect one another, the name on top of one bubble is not displaying.

Is there a way to display both the bubble names.

In this the notice the two bubbles in top right enter code herehttp://jsfiddle.net/htb38096/

Answer 1

You can enable the allowOverlap property for data labels:

plotOptions: {
    series: {
        dataLabels: {
            allowOverlap: true,
            ...
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/k23xLjmn/

API Reference: https://api.highcharts.com/highcharts/series.bubble.dataLabels.enabled

Answer 2

try this on dataLabels:

dataLabels: {
      enabled: true,
      useHTML: true,             
      style: { textShadow: 'none',fontSize: '10px',color:'black' },
      formatter: function() {
             return this.point.name;
      },
}