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

Angular Radar Chart

Updated on Dec 12, 2025

Radar charts, also known as spider charts, are categorical charts that wrap the X-axis in a circular or polygonal shape. They display multivariate data where the order of categories is not significant, making them useful for comparing multiple variables across different items.

The following example demonstrates the Angular Radar chart in action.

Change Theme

Theme

Loading ...

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.
ts
```
public data: number[] = [10, 25, 15, 30, 20];
```

Binding to arrays—Use arrays of [value, category] pairs.

public data: [number, string][] = [[10, 'Jan'], [25, 'Feb'], [15, 'Mar']];

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

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`	`string`	Yes*	The property name that contains the numeric value (*required when binding to objects).
`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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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 lines of the Angular Radar Chart.

Change Theme

Theme

Loading ...

Angular Radar Chart

Binding to Data

Plot Bands Fill of the Angular Radar Chart

Customizing the Lines of the Angular Radar Chart

Support and Learning Resources

Additional Resources