# Angular Radar Chart Radar charts, also known as spider charts, display multivariate data on a circular grid where each axis represents a different variable. Use them to compare multiple items across several characteristics or to visualize performance metrics against targets. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/radar/overview/source.txt) ## Binding to Data You can bind the Radar chart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#data) property in three formats: * Binding to numbers—Use a simple array of numeric values. ```ts public data: number[] = [10, 25, 15, 30, 20]; ``` * Binding to arrays—Use arrays of `[value, category]` pairs. ```ts public data: [number, string][] = [[10, 'Jan'], [25, 'Feb'], [15, 'Mar']]; ``` * Binding to objects—Use an array of objects with custom properties. ```ts public data: Array<{ value: number; category: string }> = [ { value: 10, category: 'Jan' }, { value: 25, category: 'Feb' }, { value: 15, category: 'Mar' } ]; ``` When binding to objects, specify which properties contain the data through the following field mappings: | Property | Data type | Required | Description | | ------------------------------------------------------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------- | | [`field`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#field) | `string` | Yes\* | The property name that contains the numeric value (\*required when binding to objects). | | [`categoryField`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#categoryfield) | `string` | No | The property name that contains the category with `string`, `date`, or `number` values. | The following example demonstrates how to bind the Radar chart series to data using object models. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/radar/data-binding/source.txt) ## Sub-Types The Radar chart features the following sub-types: * [Radar Area Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/radar#radar-area-charts) * [Radar Column Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/radar#radar-column-charts) * [Radar Line Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/radar#radar-line-charts) ### Radar Area Charts Radar Area charts display data as a series of radar area segments, which show the contribution of each value to a total. The filled areas make it easy to compare multiple data series and identify patterns across categories. To create a Radar Area chart, set the series type to `radarArea` using the [`type`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#type) option. The following example demonstrates how to create a Radar Area chart. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/radar/radar-area/source.txt) ### Radar Column Charts Radar Column charts display data as sets of vertical bars arranged in a circular pattern. This sub-type is useful for comparing individual items while visualizing the relationship between each category and the whole. To create a Radar Column chart, set the series type to `radarColumn` using the [`type`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#type) option. The following example demonstrates how to create a Radar Column chart. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/radar/radar-column/source.txt) ### Radar Line Charts Radar Line charts display data as continuous lines that connect data points evenly distributed along the category axis. This sub-type is ideal for trend analysis and comparing multiple metrics across different categories. To create a Radar Line chart, set the series type to `radarLine` using the [`type`](https://www.telerik.com/kendo-angular-ui/components/charts/api/seriesitemcomponent#type) option. The following example demonstrates how to create a Radar Line chart. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/radar/radar-line/source.txt) ## Plot Bands Fill of the Angular Radar Chart To customize and fill the plot bands of the Angular Radar Chart with a desired color, set the [`plotBands`](https://www.telerik.com/kendo-angular-ui/components/charts/api/valueaxisitemcomponent#plotbands) option of the value axis to an array of [`PlotBand`](https://www.telerik.com/kendo-angular-ui/components/charts/api/plotband) objects. Then, use the `from` and `to` properties of the objects to specify the exact plot bands to be customized and set their `color` and `opacity` to the preferred values. The following example demonstrates how to fill the plot bands of the Angular Radar Chart. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/radar/plot-bands/source.txt) ## Customizing the Lines of the Angular Radar Chart To customize the lines of the Angular Radar Chart, use the [``](https://www.telerik.com/kendo-angular-ui/components/charts/api/axisdefaultscomponent) component and configure the available `line`, `majorGridLines` and `minorGridLines` options as desired. The following example demonstrates how to customize the axis lines, grid lines, and tick marks of the Radar Chart. Use the interactive configurator to explore available customization options and see the changes reflected in real time. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/radar/custom-lines/source.txt) ## Support and Learning Resources * [Radar Chart Homepage](https://www.telerik.com/kendo-angular-ui/charts#radar-chart) * [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui/components/charts/installation/getting-started) * [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui/components/charts/api) * [Area Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/area) * [Bar Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar) * [Box Plot Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/box-plot) * [Bullet Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bullet) * [Line Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/line) * [RangeArea Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/range-area) * [RangeBar Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/range-bar) * [Waterfall Charts](https://www.telerik.com/kendo-angular-ui/components/charts/series-types/waterfall) * [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui/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/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/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)