Polar radar in EJ2 JavaScript 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.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 2004, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
},
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'India',
//Series type as polar
type: 'Polar',
// Series draw type as line
drawType: 'Line'
}],
title: 'Efficiency of oil-fired power production'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Spline
To render a spline draw type, use series drawType as Spline and inject SplineSeries module using Chart.Inject(SplineSeries) method.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Month',
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 35, interval: 10,
title: 'Temperature in Celsius',
labelFormat: '{value}C'
},
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'London',
// Series type as Polar series
type: 'Polar',
// Series draw type as spline
drawType: 'Spline'
}],
title: 'Climate Graph-2012'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Area
To render a area draw type, use series drawType as Area and inject AreaSeries module using Chart.Inject(AreaSeries) method.
var chartData = [
{ x: 1900, y: 4 }, { x: 1920, y: 3.0 },{ x: 1940, y: 3.8 },
{ x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
},
primaryYAxis: {
minimum: 2, maximum: 5, interval: 0.5,
title: 'Sales Amount in Millions'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
opacity: 0.5, fill:'#69D2E7',
name: 'Product A',
// Series type as polar series
type: 'Polar',
// Series draw type as area
drawType: 'Area'
}],
title: 'Average Sales Comparison'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Stacked Area
To render a stacked area draw type, use series drawType as StackingArea and inject StackingAreaSeries moduleusing Chart.Inject(StackingAreaSeries) method.
var chartData = [
{ 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 },
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
valueType: 'Category',
majorTickLines: { width: 0 },
edgeLabelPlacement: 'Shift'
},
primaryYAxis:
{
title: 'Spend in Billions',
minimum: 0,
maximum: 4,
interval: 1,
majorTickLines: { width: 0 },
labelFormat: '{value}B'
},
series: [
{
dataSource: chartData, xName: 'x', yName: 'y',
// Series type as polar series
type : 'Polar',
//Series draw type as stacked area series
drawType: 'StackingArea',
name: 'Organic',
}, {
dataSource: chartData, xName: 'x', yName: 'y1',
type : 'Polar',
drawType: 'StackingArea', name: 'Fair-trade',
}, {
dataSource: chartData, xName: 'x', yName: 'y2',
type : 'Polar',
drawType: 'StackingArea', name: 'Veg Alternatives',
},
],
title: 'Trend in Sales of Ethical Produce'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Column
To render a column draw type, use series drawType as Column.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold',
// Series type as polar series
type: 'Polar',
// Series draw type as column series
drawType: 'Column'
}],
title: 'Olympic Medals'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Stacked Column
To render a stacked column draw type, use series drawType as StackingColumn.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
interval: 1,
valueType: 'Category'
},
primaryYAxis:
{
title: 'Sales in Billions',
minimum: 0,
maximum: 700,
interval: 100,
labelFormat: '{value}B',
},
series: [
{
dataSource: chartData, xName: 'x', yName: 'y',
type: 'Polar',
//Series draw type as stacked column
drawType: 'StackingColumn',
name: 'UK',
}, {
dataSource: chartData, xName: 'x', yName: 'y1',
type: 'Polar',
drawType: 'StackingColumn', name: 'Germany',
}, {
dataSource: chartData, xName: 'x', yName: 'y2',
type: 'Polar',
drawType: 'StackingColumn', name: 'France',
}, {
dataSource: chartData, xName: 'x', yName: 'y3',
type: 'Polar',
drawType: 'StackingColumn', name: 'Italy',
}
],
title: 'Mobile Game Market by Country'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Range Column
To render a range column draw type, use series drawType as RangeColumn.
var data = [
{ 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Months',
valueType: 'Category'
},
primaryYAxis:
{
title: 'Temperature(Celsius)',
},
series: [
{
type: 'Polar',
// Series draw type as range column series
drawType: 'RangeColumn',
name: 'India',
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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Scatter
To render a scatter draw type, use series DrawType as Scatter and inject ScatterSeries module using Chart.Inject(ScatterSeries) method.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Month',
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 35, interval: 10,
title: 'Temperature in Celsius',
labelFormat: '{value}C'
}
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'London',
// Series type as Polar series
type: 'Polar'
// Series draw type as scatter
drawType: 'Scatter'
}],
title: 'Climate Graph-2012'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 2004, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
},
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'India',
//Series type as polar
type: 'Radar',
// Series draw type as line
drawType: 'Line'
}],
title: 'Efficiency of oil-fired power production'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Customization
Start Angle
You can customize the start angle of the polar series using startAngle property. By default, startAngle is 0 degree.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries',
startAngle: 90,
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold',
// Series type as polar series
type: 'Polar',
// Series draw type as column series
drawType: 'Column'
}],
title: 'Olympic Medals'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Coefficient in axis
You can customize the radius of the polar series using coefficient property. By default, coefficient is 100.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries',
coefficient: 80
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold',
// Series type as polar series
type: 'Polar',
// Series draw type as column series
drawType: 'Column'
}],
title: 'Olympic Medals'
}, '#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://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>