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

Angular Radar Chart

Updated on Jan 20, 2026

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.

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

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