Bubble series#

A bubble series renders bubbles, which radius are proportional to a z value, on given x and y positions. It is an extended form of a scatter series.

Bubble series features#

Like the scatter series, the bubble series also accepts data points with x and y values. But in addition, it accepts the third dimension, z, that dictates the size of the bubble. There are two modes for how the size is calculated. When sizeBy is area, the z value is proportional to the area, and when set to width, it is proportional to the diameter.

Bubble sizes#

The actual size of the bubbles is also controlled by other options:

  • The minSize and maxSize options determine the size span of the rendered bubbles. They can be set as percentages (of the chart area) or as absolute pixel values.
  • The zMin and zMax options determine how the sizes should be computed relative to the actual z value.
  • The sizeByAbsoluteValue determine how the size should handle crossing of the zThreshold, usually the zero plane.

Bubble Legend#

Bubble series supports a special type of representation in the legend through the bubble legend module.

Symbols and shapes#

In addition to the default circle shape that has given name to the bubble series, other symbols can also be used. The symbols can be predefined shapes, or images loaded by a URL.

Color axis#

While the bubble series by default renders three dimensional data through the x, y and z options, it is also add a fourth dimension through a custom color key. The default color key for the bubble series is z, but that can be changed to for example colorValue. In that case, a series configuration may look like this:

series: [{
    colorKey: 'colorValue',
    data: [{
        x: 0,
        y: 81,
        z: 63,
        colorValue: 4
    }, {
        x: 98,
        y: 5,
        z: 89,
        colorValue: 32
    }, {
        x: 51,
        y: 50,
        z: 73,
        colorValue: 9
    }]
}]

In the following example, a color axis is added and the x value is used for color key.

API Reference#

For an overview of the bubble series options see the API reference.

Edit this page