Bubble legend

Introduction

A bubble legend is an additional element, which can be added in any position in the chart legend. The bubble legend allows to present the scale of the bubble series in a simple and transparent way.

Demo with autoranges

Demo with the bubble legend styled in a similar way to the series

Demo with ranges

Installation

Requires highcharts-more.js. To display a bubble legend, set legend.bubbleLegend.enabled to true.

Configuration

The code of bubbleLegend is very simple to set, and it allows a lot of customization. The part of the options like minSize, maxSize, sizeBy, and the size calculation method works in the same way as in a bubble series.

Default style settings are taken from the first visible bubble series. The position of the bubble legend element on the chart is defined by the legend position.

Use Cases

There are two ways to add the bubble legend to the chart:

1. Automatic: without defining ranges. Creates three bubbles in the legend, the smallest and the biggest have the same dimensions and value as their counterparts in bubble series (all bubble series are included). The middle bubble has an average value of the other two. If there is only one bubble point on the chart, the bubble legend will also have only one bubble.

{
    chart: {
        type: 'bubble'
    },
    legend: {
        bubbleLegend: {
            enabled: true
        }
    },
    series: [{
        data: [
            [9, 81, 63],
            [98, 5, 89],
            [51, 50, 73],
            [41, 22, 14],
            [58, 24, 20]
        ]
    }]
}

2. Custom: with manually defined ranges. Bubbles are calculated based on ranges, minSize, and maxSize, bubble series dimensions are not included.

{
    chart: {
        type: 'bubble'
    },
    legend: {
        bubbleLegend: {
            enabled: true,
            minSize: 20,
            maxSize: 60,
            ranges: [{
                value: 14
            }, {
                value: 89
            }]
        }
    },
    series: [{
        minSize: 20,
        maxSize: 60,
        data: [
            [9, 81, 63],
            [98, 5, 89],
            [51, 50, 73],
            [41, 22, 14],
            [58, 24, 20]
        ]
    }]
}

API document

For more details check the API documentation.