Displaying additional text for Highcharts Bubble chart

Question

Well... I know how to display custom text on each bubble in highcharts bubble chart but is it possible to have additional text appear above or outside the bubble (something like the image below)?

For those who need to know how to display custom text on bubbles, here is the required option for chart options: (view the full code)

        plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                useHTML:true,
                formatter:function(){
                    return "<span style='position:relative;top:-10px;'>"+this.y + "$</span>";
                }
            }
        }

Answer 1

I found a solution for this anyway. I used the this.point.shapeArgs.r to get the radius of each bubble in formatter function. here is the function:

formatter:function(){
                    return "<div class='labeltext'><span style='position :relative;top:-"+this.point.shapeArgs.r+"px;display:block'>Group #</span><span style='position:relative;top:-10px;text-align:center;'>"+this.y+"$</span></div>";
                }

full updated example is here

Update To solve the "data labels being cropped" issue, take a look at this updated version