New to Kendo UI for Angular? Start a free 30-day trial

Bubble

Updated on Dec 12, 2025

Bubble charts are useful for visualizing different scientific relationships such as economic or social relations because the X-axis of the Bubble Charts is numerical and does not require items.

Bubble Charts are also suitable for displaying dozens to hundreds of values, which is convenient for visualizing size values that differ by several orders of magnitude. Because the size value is represented by a circle area, it is recommended to plot positive values.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Bubble chart series to an array through the data property in two formats:

Binding to arrays—Use arrays of [X, Y, size] where the first element is the X coordinate, the second element is the Y coordinate, and the third element is the bubble size.
ts
```
public data: [number, number, number][] = [[10, 20, 5], [15, 30, 10], [25, 15, 8]];
```

Binding to objects—Use an array of objects with custom properties.

public data: Array<{ x: number; y: number; size: number }> = [
    { x: 10, y: 20, size: 5 },
    { x: 15, y: 30, size: 10 },
    { x: 25, y: 15, size: 8 }
];

When binding to objects, specify which properties contain the data through the following field mappings:

Property	Data type	Required	Description
`xField`	`string`	Yes*	The property name that contains the X coordinate with `number` or `date` values (*required when binding to objects).
`yField`	`string`	Yes*	The property name that contains the Y coordinate with `number` values (*required when binding to objects).
`sizeField`	`string`	Yes*	The property name that contains the bubble size with `number` values (*required when binding to objects).
`xAxis`	`string`	No	The name of the X axis to use.
`yAxis`	`string`	No	The name of the Y axis to use.
`colorField`	`string`	No	The property name that contains the color with `string` values.

The following example demonstrates how to bind the Bubble chart series to data using object models.

Change Theme

Theme

Loading ...

Bubble

Binding to Data

Support and Learning Resources

Additional Resources