All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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.

jQuery
JavaScript
$(function () {
    $("#chartContainer").dxChart({
        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
    });
});
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
    ],
    // ...
})

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

View Demo

See Also