Radar Chart in Angular Charts

28 Aug 202624 minutes to read

Radar

A radar chart displays values on multiple axes arranged radially around a center point. It compares multiple variables across categories in a star-shaped form.

Radar chart comparing multivariate data

To render a radar series in your chart, follow these steps to configure it correctly:

  1. Set the series type: Define the series type as Radar in your chart configuration. The optional drawType (default Line) controls the inner plotting style.

  2. Provide RadarSeriesService: Inject the RadarSeriesService into the component providers array. For category-axis data also include CategoryService, and register the service that matches the chosen drawType (for example LineSeriesService, SplineSeriesService, AreaSeriesService).

  3. Bind category and value data: Bind data through the series dataSource property and map the category and value fields to xName and yName. For radar charts, the chart maps xName to the angular axis and yName to the radial axis.

Draw type

Use the drawType property to change the inner plotting style in a Radar chart to Line, Column, Area, RangeColumn, Spline, Scatter, StackingArea, SplineArea, or StackingColumn. Default is Line. Each draw type requires its matching service in providers.

import { ChartModule, RadarSeriesService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [RadarSeriesService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Radar' xName='x' yName='y' drawType='Line'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public title?: string;
    public data?: Object[];

    ngOnInit(): void {
        this.data = chartData;
        this.title = 'Efficiency of oil-fired power production';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let chartData: object[] = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: 26 },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 }
];

Series customization

Start angle

You can customize the start angle of the radar series using the startAngle property. By default, startAngle is 0 degree.

import { ChartModule, RadarSeriesService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [RadarSeriesService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Radar' xName='x' yName='y' drawType='Line'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public title?: string;
    public data?: Object[];

    ngOnInit(): void {
        this.data = chartData;
        this.primaryXAxis = {
            title: 'Year',
            startAngle: 90,
            minimum: 2004,
            maximum: 2012,
            interval: 1
        };
        this.primaryYAxis = {
            minimum: 20,
            maximum: 40,
            interval: 5,
            title: 'Efficiency',
            labelFormat: '{value}%'
        };
        this.title = 'Efficiency of oil-fired power production';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let chartData: object[] = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: 26 },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 }
];

Radius

Use the coefficient property on primaryXAxis to adjust the radial extent of the radar chart. Default is 100.

import { ChartModule, RadarSeriesService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { radarData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [RadarSeriesService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Radar' xName='x' yName='y' drawType='Line'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public title?: string;
    public data?: Object[];

    ngOnInit(): void {
        this.data = radarData;
        this.primaryXAxis = {
            title: 'Year',
            coefficient: 50,
            minimum: 2004,
            maximum: 2012,
            interval: 1
        };
        this.primaryYAxis = {
            minimum: 20,
            maximum: 40,
            interval: 5,
            title: 'Efficiency',
            labelFormat: '{value}%'
        };
        this.title = 'Efficiency of oil-fired power production';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let polarCategory: Object[] =[{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1 }, { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, { x: 'May', y: 13 }, { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, { x: 'Aug', y: 20 }, { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, { x: 'Nov', y: 4 }, { x: 'Dec', y: 0 }];


export let stackedData: Object[] =  [{ x: '2000', y: 0.61, y1: 0.03, y2: 0.48},
    { x: '2001', y: 0.81, y1: 0.05, y2: 0.53 },
    { x: '2002', y: 0.91, y1: 0.06, y2: 0.57 },
    { x: '2003', y: 1, y1: 0.09, y2: 0.61 },
    { x: '2004', y: 1.19, y1: 0.14, y2: 0.63 },
    { x: '2005', y: 1.47, y1: 0.20, y2: 0.64 },
    { x: '2006', y: 1.74, y1: 0.29, y2: 0.66 },
    { x: '2007', y: 1.98, y1: 0.46, y2: 0.76 },
    { x: '2008', y: 1.99, y1: 0.64, y2: 0.77 },
    { x: '2009', y: 1.70, y1: 0.75, y2: 0.55 }];

export let columnData: Object[] = [
      { country: "USA", gold: 50 },
      { country: "China", gold: 40 },
      { country: "Japan", gold: 70 },
      { country: "Australia", gold: 60 },
      { country: "France", gold: 50 },
      { country: "Germany", gold: 40 },
      { country: "Italy", gold: 40 },
      { country: "Sweden", gold: 30 }];

export let data: Object[] = [
    { x: '2014', y: 111.1, y1: 76.9, y2: 66.1, y3: 34.1 },
    { x: '2015', y: 127.3, y1: 99.5, y2: 79.3, y3: 38.2 },
    { x: '2016', y: 143.4, y1: 121.7, y2: 91.3, y3: 44.0 },
    { x: '2017', y: 159.9, y1: 142.5, y2: 102.4, y3: 51.6 },
    { x: '2018', y: 175.4, y1: 166.7, y2: 112.9, y3: 61.9 },
    { x: '2019', y: 189.0, y1: 182.9, y2: 122.4, y3: 71.5 },
    { x: '2020', y: 202.7, y1: 197.3, y2: 120.9, y3: 82.0 }
    ];

export let rangeData: Object[] = [
        { x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 }, { x: 'Mar', low: 1.9, high: 8.5 },
        { x: 'Apr', low: 3.1, high: 10.8 }, { x: 'May', low: 5.7, high: 14.40 }, { x: 'Jun', low: 8.4, high: 16.90 },
        { x: 'Jul', low: 10.6,high: 19.20 }, { x: 'Aug', low: 10.5,high: 18.9 }, { x: 'Sep', low: 8.5, high: 16.1 },
        { x: 'Oct', low: 6.0, high: 12.5 }, { x: 'Nov', low: 1.5, high: 6.9  }, { x: 'Dec', low: 5.1, high: 12.1 }];

export let radarData: Object[] = [{ x: 2005, y: 28 }, { x: 2006, y: 25 },{ x: 2007, y: 26 }, { x: 2008, y: 27 },
                     { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }];

Empty points

A data point whose mapped value is null or undefined is empty. Configure its behavior with emptyPointSettings.mode. Be sure your data contains at least one null / undefined entry for the change to be visible.

Mode

Use mode to control empty-point rendering. The default is Gap.

Mode Visual behavior
Gap Skip the empty point; the line breaks at the gap.
Drop Drop the empty point; subsequent segments are still rendered.
Zero Treat the empty point as 0 and render a flat segment.
Average Replace the empty value with the average of the surrounding points. 
import { ChartModule, RadarSeriesService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { radarData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [RadarSeriesService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Radar' xName='x' yName='y' drawType='Line' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public data?: Object[];
    public emptyPointSettings?: Object;

    ngOnInit(): void {
        this.data = radarData;
        this.primaryXAxis = {
            title: 'Year',
            startAngle: 90,
            minimum: 2004,
            maximum: 2012,
            interval: 1
        };
        this.emptyPointSettings = {
            mode: 'Zero'
        };
        this.title = 'Efficiency of oil-fired power production';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let radarData: Object[] = [ { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: 26 },
    { x: 2008, y: null },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 }
];

Empty-point fill

Use the emptyPointSettings.fill property to customize the fill color of empty segments.

import { ChartModule, RadarSeriesService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { radarData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [RadarSeriesService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Radar' xName='x' yName='y' [marker]='marker' drawType='Line' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public title?: string;
    public data?: Object[];
    public marker?: object;
    public emptyPointSettings?: Object;

    ngOnInit(): void {
        this.data = radarData;
        this.primaryXAxis = {
            title: 'Year',
            startAngle: 90,
            minimum: 2004,
            maximum: 2012,
            interval: 1
        };
        this.emptyPointSettings = {
            mode: 'Average',
            fill: 'red'
        };
        this.marker = {visible: true};
        this.title = 'Efficiency of oil-fired power production';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let radarData: Object[] = [ { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: 26 },
    { x: 2008, y: null },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 }
];

Empty-point border

Use the emptyPointSettings.border object ({ width, color }) to customize the outline of empty segments.

import { ChartModule, RadarSeriesService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { radarData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [RadarSeriesService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Radar' xName='x' yName='y' [marker]='marker' drawType='Line' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public data?: Object[];
    public marker?: object;
    public emptyPointSettings?: Object;

    ngOnInit(): void {
        this.data = radarData;
        this.primaryXAxis = {
            title: 'Year',
            startAngle: 90,
            minimum: 2004,
            maximum: 2012,
            interval: 1
        };
        this.emptyPointSettings = {
            mode: 'Average',
            fill: 'red',
            border: { width: 2, color: 'blue' }
        };
        this.marker = {visible: true};
        this.title = 'Efficiency of oil-fired power production';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let radarData: Object[] = [ { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: 26 },
    { x: 2008, y: null },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 }
];

Events

Series render

The seriesRender event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart. The callback receives an ISeriesRenderEventArgs argument that exposes mutable series, data, and fill properties.

<ejs-chart (seriesRender)="onSeriesRender($event)"></ejs-chart>
import { ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
import { ChartModule, RadarSeriesService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { radarData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [RadarSeriesService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (seriesRender)='seriesRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Radar' xName='x' yName='y' drawType='Line'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public title?: string;
    public data?: Object[];

    ngOnInit(): void {
        this.data = radarData;
        this.primaryXAxis = {
            title: 'Year',
            startAngle: 90,
            minimum: 2004,
            maximum: 2012,
            interval: 1
        };
        this.primaryYAxis = {
            minimum: 20,
            maximum: 40,
            interval: 5,
            title: 'Efficiency',
            labelFormat: '{value}%'
        };
        this.title = 'Efficiency of oil-fired power production';
    }

    public seriesRender(args: ISeriesRenderEventArgs): void {
        args.fill = '#ff6347';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let radarData: Object[] = [{ x: 2005, y: 28 },
{ x: 2006, y: 25 },
{ x: 2007, y: 26 },
{ x: 2008, y: 27 },
{ x: 2009, y: 32 },
{ x: 2010, y: 35 },
{ x: 2011, y: 30 }
];

Point render

The pointRender event allows you to customize each data point before it is rendered on the chart. The callback receives an IPointRenderEventArgs argument that exposes the current point, series, fill, and border.

<ejs-chart (pointRender)="onPointRender($event)"></ejs-chart>
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
import { ChartModule, RadarSeriesService, LineSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { radarData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [RadarSeriesService, LineSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Radar' xName='x' yName='y' [marker]='marker' drawType='Line'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public title?: string;
    public data?: Object[];
    public marker?: object;
    ngOnInit(): void {
        this.data = radarData;
        this.primaryXAxis = {
            title: 'Year',
            startAngle: 90,
            minimum: 2004,
            maximum: 2012,
            interval: 1
        };
        this.primaryYAxis = {
            minimum: 20,
            maximum: 40,
            interval: 5,
            title: 'Efficiency',
            labelFormat: '{value}%'
        };
        this.marker = {visible: true};
        this.title = 'Efficiency of oil-fired power production';
    }

    public pointRender(args: IPointRenderEventArgs): void {
        args.fill = '#ff6347';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let radarData: Object[] = [{ x: 2005, y: 28 },
{ x: 2006, y: 25 },
{ x: 2007, y: 26 },
{ x: 2008, y: 27 },
{ x: 2009, y: 32 },
{ x: 2010, y: 35 },
{ x: 2011, y: 30 }
];

Troubleshooting

The following symptoms map to the most common configuration issues.

  • No chart is rendered: Verify that RadarSeriesService is registered, the series type is Radar, and the draw-type-specific service (for example LineSeriesService, SplineSeriesService) is also registered.
  • startAngle or coefficient has no effect: They live on primaryXAxis, not on the series — Verify the property is set in the axis block, not on <e-series>.
  • Empty-point settings have no visual effect: Confirm that null or undefined exists in the data values mapped to yName, and that emptyPointSettings.mode matches the desired behavior.
  • Event handlers do not fire: Confirm that seriesRender or pointRender are bound on the <ejs-chart> element, not on the <e-series>, and that the handler is a public method on the component.

See also