is it possible to add a legend for bubble size in high charts?

Question

I'm using the latest version of high charts. I successfully created a 3d bubble chart following http://www.highcharts.com/demo/bubble-3d

I am wondering if I can add to the legend a reference to what the size of the bubble means. Just a simple bubble with some text next to it would be enough.

Thanks in advance for your help.

Answer 1

Just add an empty series and name it.Give it desired name ,See Updated fiddle here

   {
   name :"description",     
   marker: {
            fillColor: {
                radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                stops: [
                    [0, 'rgba(255,255,255,0.5)'],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
                ]
            }
        }}

Answer 2

Representing bubble size in a legend is not currently a feature of Highcharts.

You can draw one manually:

1. Add a series for the legend
2. Draw a rendered box around the legend

JSFiddle

Add a series for the legend

series: [{
      // This series gives a legend for reference
      data: [{
        color: Highcharts.getOptions().colors[0],
        x: 86,
        y: 25,
        z: 10,
        dataLabels: {
          format: '10%',
          y: 40
        }
      }, {
        x: 90,
        y: 25,
        z: 15,
        dataLabels: {
          format: '15%',
          y: 40
        }
      }, {
        x: 94,
        y: 25,
        z: 35,
        dataLabels: {
          format: '35%',
          y: 40
        }
      }]
    }, {
      color: Highcharts.getOptions().colors[0],
      data: [{
        x: 95,
        y: 95,
        z: 13.8,
        name: 'BE',
        country: 'Belgium'
      }, {

Draw a rendered box around the legend

events: {
  load: function() {

    // Draw the flow chart
    var ren = this.renderer,
      colors = Highcharts.getOptions().colors;

    // Script label
    ren.label('Obesity Rate', 410, 220)
      .attr({
        stroke: '#777',
        'stroke-width': 1,
        padding: 5,
        r: 5,
        width: 168,
        height: 73
      })
      .css({
        color: '#333',
        textAlign: 'center',
        fontSize: '1.1em'
      })
      .add();
  }
}