Radar Chart in EJ2 TypeScript control
28 Sep 20236 minutes to read
Radar Chart
To render a radar series, use series type
as Radar
and inject PolarSeries
module using Chart.Inject(RadarSeries)
method.
Draw Type
similar to Polar drawType, Radar draw property is used to change the series plotting type to line, column, area, range column, spline, scatter, stacking area and stacking column. The default value of drawType is Line
.
import { Chart, LineSeries, RadarSeries } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(LineSeries, RadarSeries);
let chart: Chart = new Chart({
series:[{
dataSource: numData, xName: 'x', yName: 'y',
//Series type as polar
type: 'Radar',
// Series draw type as line
drawType: 'Line'
}],
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Customization
Start Angle
You can customize the start angle of the polar series using startAngle
property. By default, startAngle
is 0 degree.
import { Chart, Category, RadarSeries, LineSeries } from '@syncfusion/ej2-charts';
import { columnData } from './datasource.ts';
Chart.Inject(Category, RadarSeries, LineSeries);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
startAngle: 120
},
series: [{
dataSource: columnData,
xName: 'country', yName: 'gold',
// Series type as polar series
type: 'Radar',
// Series draw type as column series
drawType: 'Line'
}],
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Radius
You can customize the radius of the polar series using coefficient
property. By default, coefficient
is 100.
import { Chart, Category, RadarSeries } from '@syncfusion/ej2-charts';
import { columnData } from './datasource.ts';
Chart.Inject(Category, RadarSeries);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
coefficient: 50
},
series:[{
dataSource: columnData,
xName: 'country', yName: 'gold',
// Series type as polar series
type: 'Radar',
// Series draw type as column series
drawType: 'Column'
}],
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>