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.
Binding to Data
You can bind the Radar chart series to an array through the data property in three formats:
-
Binding to numbers—Use a simple array of numeric values.
tspublic data: number[] = [10, 25, 15, 30, 20]; -
Binding to arrays—Use arrays of
[value, category]pairs.tspublic data: [number, string][] = [[10, 'Jan'], [25, 'Feb'], [15, 'Mar']]; -
Binding to objects—Use an array of objects with custom properties.
tspublic 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 fieldstringYes* The property name that contains the numeric value (*required when binding to objects). categoryFieldstringNo The property name that contains the category with string,date, ornumbervalues.
The following example demonstrates how to bind the Radar chart series to data using object models.
Sub-Types
The Radar chart features the following sub-types:
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 option.
The following example demonstrates how to create a Radar Area chart.
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 option.
The following example demonstrates how to create a Radar Column chart.
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 option.
The following example demonstrates how to create a Radar Line chart.
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 option of the value axis to an array of 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.
Customizing the Lines of the Angular Radar Chart
To customize the lines of the Angular Radar Chart, use the <kendo-chart-axis-defaults> 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.
Support and Learning Resources
- Radar Chart Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Charts
- Area Charts
- Bar Charts
- Box Plot Charts
- Bullet Charts
- Line Charts
- RangeArea Charts
- RangeBar Charts
- Waterfall Charts
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base