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

Answer 2

As far as I can see from the documentation http://api.highcharts.com/highcharts#plotOptions.bubble.dataLabels you can only have one label per value.

But I see two options:

1. Add the text by using the the renderer http://api.highcharts.com/highcharts#Renderer

2. Use a workaround to set the position of one part of the label text

     formatter:function(){
                   return "<span>"+this.y + "$</span> <span style='position:relative;top:-"+this.point.z/3)+"px;'>FOO "+this.point.z+"</span>";
               }, 
   

See http://jsfiddle.net/t7yYn/5/

With

this.point.z

you get the value of your bubble.

On the fly I did not found the scaling. Either you find the value by trial and error (depends on the minSize, maxSize of your Bubbles and the chart dimensions) or you find out how to get it from highchart. (Let me know how to do it! ;-)

Hope that helps.