Skip to main content
Version: 8.3.2

Bubble

A common visualization type that extends from a Scatter chart. The bubble chart is a scatter chart with individual point sizes and/or colors. This way, the size or color of each point can represent a property of the data point.

For example, older measurements can have less opacity. Or, more impactful events may have larger point size, etc.

Chart with bubble seriesChart with bubble series

// Creation of a bubble series
const bubbleSeries = chart.addPointSeries({
    individualPointSizeEnabled: true
})

3D bubble series is technically just a 3D scatter series with individual point sizes and/or colors. Here you can find guides specific to individual point sizes. For other guides, refer to 3D scatter series

Individual point sizes as pixels​

const bubbleSeries = chart.addPointSeries({
    individualPointSizeEnabled: true
})
bubbleSeries.add([
    { x: 0, y: 0, z: 0, size: 10 },
    { x: 1, y: 3, z: 0, size: 15 },
    { x: 2, y: 2, z: 0, size: 5 },
])

Individual point sizes as axis dimensions​

Alternatively, you can also specify point sizes along X, Y and Z axes:

const bubbleSeries = chart.addPointSeries({
    individualPointSizeAxisEnabled: true
})
bubbleSeries.add([
    { x: 0, y: 0, z: 0, sizeAxisX: 2, sizeAxisY: 1, sizeAxisZ: 1 },
    { x: 1, y: 3, z: 0, sizeAxisX: 1, sizeAxisY: 2, sizeAxisZ: 1 },
    { x: 2, y: 2, z: 0, sizeAxisX: 1, sizeAxisY: 1, sizeAxisZ: 2 },
])

Interactions with data points​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line