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

Polar

Updated on Dec 12, 2025

Polar Charts are scatter charts, which display two-dimensional data series in polar coordinates.

The following example demonstrates the Angular Polar chart in action.

Change Theme

Theme

Loading ...

Binding to Data

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

Binding to arrays—Use arrays of [X, Y] pairs.

public data: [number, number][] = [
    [0, 10],
    [45, 20],
    [90, 15]
];

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

public data: Array<{ x: number; y: number }> = [
    { x: 0, y: 10 },
    { x: 45, y: 20 },
    { x: 90, y: 15 }
];

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 value with `number` or `date` values (*required when binding to objects).
`yField`	`string`	Yes*	The property name that contains the Y value 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.

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

Change Theme

Theme

Loading ...