A newer version of this page is available. Switch to the current version.

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 option 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 option. Based on the size values, the widget calculates the actual bubble sizes in pixels, ranging between minBubbleSize and maxBubbleSize.

$(function () {
        series: [{
            type: "bubble",
            sizeField: "size"
        }, {
            // ...
        commonSeriesSettings: {
            bubble: { ... }
        minBubbleSize: 14, // in pixels
        maxBubbleSize: 0.3 // in fractions of the widget's height or width, depending on which is smaller
    <dxi-series type="bubble" sizeField="size"></dxi-series>
    <dxi-series ... ></dxi-series>
        <dxo-bubble ... ></dxo-bubble>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    imports: [
        // ...
    // ...

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

View Demo

See Also