Skip to main content
Version: 6.1.2

Bubble

A common visualization type that extends from a Scatter chart](/6.1.2/features/d3/scatter). 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 series Chart 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](/6.1.2/features/d3/scatter)

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](/6.1.2/features/d3/line)