# Angular Polar Charts

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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/polar/overview/source.txt)

## Binding to Data

You can bind the Polar chart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#data) property in two formats:

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

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

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

  ```ts
  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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#xfield) | `string`  | Yes\*    | The property name that contains the X value with `number` or `date` values (\*required when binding to objects). |
  | [`yField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#yfield) | `string`  | Yes\*    | The property name that contains the Y value with `number` values (\*required when binding to objects).           |
  | [`xAxis`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#xaxis)   | `string`  | No       | The name of the X axis to use.                                                                                   |
  | [`yAxis`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/polar/data-binding/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#type) to `polarArea`.

The following example demonstrates a Polar Area chart.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/polar/polar-area/source.txt)

### 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#type) to `polarLine`.

The following example demonstrates a Polar Line chart.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/polar/polar-line/source.txt)

### 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#type) to `polarScatter`.

The following example demonstrates a Polar Scatter chart.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/polar/polar-scatter/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#color) and [`opacity`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#opacity)—Control the series color and transparency for all Polar chart types.
* [`width`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#width), [`lineStyle`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#linestyle), and [`dashType`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#dashtype)—Configure line appearance (width, smooth/normal style, and dash patterns) for Polar Line charts.
* [`markers`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/polar/customization/source.txt)

## Support and Learning Resources

* [Polar Chart Homepage](https://www.telerik.com/kendo-angular-ui/charts#polar-chart)
* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started)
* [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [Bubble Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/bubble)
* [Scatter Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/scatter)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)