All docs
V20.2
21.1 (CTP)
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Bubble Series

The Bubble series type visualizes data as individual points of different sizes called "bubbles". Because Bubble series have the additional size characteristic, they can convey more information than, for example, Line or Scatter series.

Assign "bubble" to the series[].type property to specify the Bubble series type. You can configure:

  • Each series individually using the series array;
  • All series in the Chart using the commonSeriesSettings object;
  • All Bubble series using the commonSeriesSettings.bubble object.

Note that Bubble series require an additional data field that provides size values. Assign its name to the series[].sizeField property. Based on the size values, the UI component calculates the actual bubble sizes in pixels, ranging between minBubbleSize and maxBubbleSize.

jQuery
JavaScript
$(function () {
    $("#chartContainer").dxChart({
        series: [{
            type: "bubble",
            sizeField: "size"
        }, {
            // ...
        }],
        commonSeriesSettings: {
            bubble: { ... }
        },
        minBubbleSize: 14, // in pixels
        maxBubbleSize: 0.3 // in fractions of the UI component's height or width, depending on which is smaller
    });
});
Angular
HTML
TypeScript
<dx-chart
    [minBubbleSize]="14"
    [maxBubbleSize]="0.3">
    <dxi-series type="bubble" sizeField="size"></dxi-series>
    <dxi-series ... ></dxi-series>
    ...
    <dxo-common-series-settings>
        <dxo-bubble ... ></dxo-bubble>
    </dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ...
        :min-bubble-size="14"
        :max-bubble-size="0.3">
        <DxSeries
            type="bubble"
            size-field="size"
        />
        <DxSeries ... />
        ...
        <DxCommonSeriesSettings :bubble="bubbleSettings"/>
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxCommonSeriesSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxCommonSeriesSettings
    },
    data() {
        return {
            bubbleSettings: { ... }
        };
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Series,
    CommonSeriesSettings
} from 'devextreme-react/chart';

const bubbleSettings = { ... };

class App extends React.Component {
    render() {
        return (
            <Chart ...
                minBubbleSize={14}
                maxBubbleSize={0.3}>
                <Series
                    type="bubble"
                    sizeField="size"
                />
                <Series ... />
                ...
                <CommonSeriesSettings bubble={bubbleSettings} />
            </Chart>
        );
    }
}

export default App;

Refer to the BubbleSeries section of the API Reference for a full list of properties available to a Bubble series.

View Demo

See Also