CODEWITHSUNDEEP
highcharts
user2150801
user2150801

Reputation: 51

Highcharts naming of individual bubbles

The new Highcharts v3.0 bubble chart looks great. Is it possible to annotate and display each bubble with a name/some text? Thanks, Nigel.

Upvotes: 5

Views: 4722

Answers (2)

franzo
franzo

Reputation: 1469

There are two things you need to do.

First, name each data point (bubble): 

data: [
  { name: 'Alice', x: 3.5, y: 4, z: 5}, 
  { name: 'Eve', x: 7, y: 7, z: 3}, 
  { name: 'Carol', x: 4, y: 8, z: 6}
]

Second, create a data label formatter:

dataLabels: {
  enabled: true,
  formatter: function() {
    return this.point.name;
  }
}

You can see this in action here: http://jsfiddle.net/franzo/JuGDp/1/

Bob's your uncle.

Upvotes: 14

SteveP
SteveP

Reputation: 19093

Depending on what you want to display, it should be possible. The bubble charts will allow the same options as any other highcharts. The easiest way is to use dataLabels http://api.highcharts.com/highcharts#plotOptions.scatter.dataLabels

       dataLabels:{
           enabled:true
       }

e.g. http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-datalabels-box/

If that isn't flexible enough for you, it is possible to draw whatever you want on the chart using the underlying renderer http://api.highcharts.com/highcharts#Renderer. This is a bit harder, but. Fairly straight forward once you get the hang of it.

I've created a small example using datalabels here :http://jsfiddle.net/4nRk6/

Datalabels can be customised with a formatter function, for example:

 dataLabels: {
           enabled: true,
           formatter: function() {
                    return this.y +'mm';
           }
 }

The full documentation is here: http://api.highcharts.com/highcharts#plotOptions.column.dataLabels

If you want extra information on the bubbles, you may need to format your data series as follows:

[
    {x:1, y:5, bubbleText:"Bubble 1"},
    {x:2, y:15, bubbleText:"Bubble 2"},
    {x:3, y:5, bubbleText:"Bubble 3"}
]

Inside your dataLabel, you can then reference this.point.bubbleText as well as this.x and this.y.

Upvotes: 3

Related Questions