3

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>";
                }
            }
        }

sample

Bakhshi
  • 1,299
  • 16
  • 25

2 Answers2

4

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

Bakhshi
  • 1,299
  • 16
  • 25
0

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.

smartmeta
  • 1,149
  • 1
  • 17
  • 38
  • Thanks @smartmeta for your answer, I found a way! take a look at my answer above ;) hope it helps you – Bakhshi Sep 12 '13 at 07:29
  • there is something weird about it. if you check my jsfiddle (show just the second series) no text is being displayed for two of bubbles! (first and last). if you check the html, the spans are there but their grand parent is set "visible:hidden". You can see the text by zooming in. any idea? – Bakhshi Sep 12 '13 at 07:32
  • I see it, but I have no idea. – smartmeta Sep 12 '13 at 07:35
  • it seems that they (div.labelText) are on edge of plot area and as they go beyond plot area boundary, they are cropped (completely!!). anyway, I managed to solve this by setting `crop : false`. take a look at the updated sample if you like. – Bakhshi Sep 12 '13 at 23:58