Polar radar in EJ2 TypeScript Chart control
8 May 202324 minutes to read
Polar Chart
To render a polar series, use series type
as Polar
and inject PolarSeries
module using Chart.Inject(PolarSeries)
method.
Draw Types
Polar drawType 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
.
Line
To render a line draw type, use series drawType
as Line
and inject LineSeries
module using Chart.Inject(LineSeries)
method.
isClosed
property specifies whether to join start and end point of a line series used in polar chart to form a closed path. Default value of isClosed is true.
import { Chart, LineSeries, PolarSeries } from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries, PolarSeries);
let chartData: any[] = [
{ 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 }
];
let chart: Chart = new Chart({
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
//Series type as polar
type: 'Polar',
// 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>
Spline
To render a spline draw type, use series drawType
as Spline
and inject SplineSeries
module using Chart.Inject(SplineSeries)
method.
import { Chart, SplineSeries, Category, PolarSeries } from '@syncfusion/ej2-charts';
Chart.Inject(SplineSeries, Category, PolarSeries);
import { polarCategory } from './datasource.ts';
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category'
},
series:[{
dataSource: polarCategory,
xName: 'x', yName: 'y',
// Series type as Polar series
type: 'Polar'
// Series draw type as spline
drawType: 'Spline'
}],
}, '#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>
Area
To render a area draw type, use series drawType
as Area
and inject AreaSeries
module using Chart.Inject(AreaSeries)
method.
import { Chart, AreaSeries, PolarSeries } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(AreaSeries, PolarSeries);
let chart: Chart = new Chart({
series:[{
dataSource: numData,
xName: 'x', yName: 'y',
// Series type as polar series
type: 'Polar'
// Series draw type as area
drawType: 'Area'
}],
}, '#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>
Stacked Area
To render a stacked area draw type, use series drawType
as StackingArea
and inject StackingAreaSeries
moduleusing Chart.Inject(StackingAreaSeries)
method.
import { Chart, StackingAreaSeries, Category, PolarSeries } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(StackingAreaSeries, Category, PolarSeries);
let chart: Chart = new Chart({
series: [
{
dataSource: stackedData, xName: 'x', yName: 'y',
// Series type as polar series
type : 'Polar',
//Series draw type as stacked area series
drawType: 'StackingArea',
}, {
dataSource: stackedData, xName: 'x', yName: 'y1',
type : 'Polar',
drawType: 'StackingArea',
}, {
dataSource: stackedData, xName: 'x', yName: 'y2',
type : 'Polar',
drawType: 'StackingArea',
},
],
}, '#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>
Column
To render a column draw type, use series drawType
as Column
.
import { Chart, Category, PolarSeries, ColumnSeries } from '@syncfusion/ej2-charts';
import { columnData } from './datasource.ts';
Chart.Inject(Category, PolarSeries, ColumnSeries);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
},
series:[{
dataSource: columnData,
xName: 'country', yName: 'gold',
// Series type as polar series
type: 'Polar',
// 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>
Stacked Column
To render a stacked column draw type, use series drawType
as StackingColumn
.
import { Chart, Category, PolarSeries, StackingColumnSeries } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(Category, PolarSeries, StackingColumnSeries);
let chart: Chart = new Chart({
series: [
{
dataSource: stackedData, xName: 'x', yName: 'y',
type: 'Polar',
//Series draw type as stacked column
drawType: 'StackingColumn',
}, {
dataSource: stackedData, xName: 'x', yName: 'y1',
type: 'Polar',
drawType: 'StackingColumn',
}, {
dataSource: stackedData, xName: 'x', yName: 'y2',
type: 'Polar',
drawType: 'StackingColumn',
}, {
dataSource: stackedData, xName: 'x', yName: 'y3',
type: 'Polar',
drawType: 'StackingColumn',
}
],
}, '#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>
Range Column
To render a range column draw type, use series drawType
as RangeColumn
.
import { Chart, Category, PolarSeries, RangeColumnSeries } from '@syncfusion/ej2-charts';
Chart.Inject(Category, PolarSeries, RangeColumnSeries);
let data: any[] = [
{ 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category'
},
series: [
{
type: 'Polar',
// Series draw type as range column series
drawType: 'RangeColumn',
dataSource: data, xName: 'x', high: 'high', low: 'low',
}
],
title: 'Maximum and Minimum Temperature'
}, '#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>
Scatter
To render a scatter draw type, use series DrawType
as Scatter
and inject ScatterSeries
module using Chart.Inject(ScatterSeries)
method.
import { Chart, ScatterSeries, Legend, Category, PolarSeries } from '@syncfusion/ej2-charts';
import { polarCategory } from './datasource.ts';
Chart.Inject(ScatterSeries, Legend, Category, PolarSeries);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category'
},
series:[{
dataSource: polarCategory,
xName: 'x', yName: 'y',
// Series type as Polar series
type: 'Polar'
// Series draw type as scatter
drawType: 'Scatter'
}],
}, '#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>
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, PolarSeries } from '@syncfusion/ej2-charts';
import { columnData } from './datasource.ts';
Chart.Inject(Category, PolarSeries);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
},
series:[{
dataSource: columnData,
xName: 'country', yName: 'gold',
// Series type as polar series
type: 'Polar',
// 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>
Coefficient in axis
You can customize the radius of the polar series using coefficient
property. By default, coefficient
is 100.
import { Chart, Category, PolarSeries } from '@syncfusion/ej2-charts';
import { columnData } from './datasource.ts';
Chart.Inject(Category, PolarSeries);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
},
series:[{
dataSource: columnData,
xName: 'country', yName: 'gold',
// Series type as polar series
type: 'Polar',
// 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>