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

Polar Charts

Updated on Jan 20, 2026

Polar Charts display two-dimensional data series in polar coordinates. They are scatter charts that use an angular axis and a radial axis to plot data points based on angle and distance from the center.

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

Polar Chart Types

The Polar chart provides three series types for different visualization needs.

Polar Area

Polar Area charts display data as segments radiating from the center, with each segment's area representing its value. Use this type for showing distribution and relative contribution of categories in a circular format.

To create a Polar Area chart, set the series type to polarArea.

The following example demonstrates a Polar Area chart.

Change Theme

Theme

Loading ...

Polar Line

Polar Line charts connect data points with continuous lines in a circular layout. The lines can be straight or smoothed, making patterns and trends easy to identify across angular measurements.

To create a Polar Line chart, set the series type to polarLine.

The following example demonstrates a Polar Line chart.

Change Theme

Theme

Loading ...

Polar Scatter

Polar Scatter charts display individual data points in polar coordinates without connecting lines. Each point's position represents the angle (category) and distance from center (value).

To create a Polar Scatter chart, set the series type to polarScatter.

The following example demonstrates a Polar Scatter chart.

Change Theme

Theme

Loading ...

Customizing the Appearance

The Polar chart provides configuration options for customizing the visual appearance of its series. The available options vary depending on the chart type:

color and opacity—Control the series color and transparency for all Polar chart types.
width, style, and dashType—Configure line appearance (width, smooth/normal style, and dash patterns) for Polar Line charts.
markers—Customize data point markers (size, type, visibility, background, border) for Polar Line and Polar Scatter charts.

The following example demonstrates how to customize the appearance of different Polar chart types.

Change Theme

Theme

Loading ...

Polar Charts

Binding to Data

Polar Chart Types

Polar Area

Polar Line

Polar Scatter

Customizing the Appearance

Support and Learning Resources

Additional Resources