Polar Chart and Radar Chart
15 Mar 202224 minutes to read
Polar Chart
To render a polar series, use seriestype as Polar.
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. The 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.
<ejs-chart id="container">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.Line">
<e-series-marker visible="true" height="10" width="10" shape="Pentagon"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2005, y = 28 },
new PolarData{ x=2006, y = 25 },
new PolarData{ x=2007, y = 26 },
new PolarData{ x=2008, y = 27 },
new PolarData{ x=2009, y = 32 },
new PolarData{ x=2010, y = 35 },
new PolarData{ x=2011, y = 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
}Spline
To render a spline line draw type, use series drawType as Spline.
<ejs-chart id="container">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.Spline">
<e-series-marker visible="true" height="10" width="10" shape="Pentagon"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2005, y = 28 },
new PolarData{ x=2006, y = 25 },
new PolarData{ x=2007, y = 26 },
new PolarData{ x=2008, y = 27 },
new PolarData{ x=2009, y = 32 },
new PolarData{ x=2010, y = 35 },
new PolarData{ x=2011, y = 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
}Area
To render an area line draw type, use series drawType as Area.
<ejs-chart id="container">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.Area">
<e-series-marker visible="true" height="10" width="10" shape="Pentagon"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2005, y = 28 },
new PolarData{ x=2006, y = 25 },
new PolarData{ x=2007, y = 26 },
new PolarData{ x=2008, y = 27 },
new PolarData{ x=2009, y = 32 },
new PolarData{ x=2010, y = 35 },
new PolarData{ x=2011, y = 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
}Stacked Area
To render a stacked area draw type, use series drawType as StackingArea.
<ejs-chart id="container">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.StackingArea">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.StackingArea">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.StackingArea">
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
public double y1;
public double y2;
}Column
To render a column draw type, use series drawType as Column.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.Column">
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x="2005", y= 28 },
new PolarData{ x="2006", y= 25 },
new PolarData{ x="2007", y= 26 },
new PolarData{ x="2008", y= 27 },
new PolarData{ x="2009", y= 32 },
new PolarData{ x="2010", y= 35 },
new PolarData{ x="2011", y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public string x;
public double y;
}Stacked Column
To render a stacked column draw type, use series drawType as StackingColumn.
<ejs-chart id="container">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.StackingColumn">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.StackingColumn">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.StackingColumn">
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
public double y1;
public double y2;
}Range Column
To render a range column draw type, use series drawType as RangeColumn.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" high="high" low="low" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.RangeColumn">
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x="Jan", low= 0.7, high= 6.1 },
new PolarData{ x="Feb", low=1.3, high=6.3 },
new PolarData{ x="Mar", low= 1.9, high= 8.5 },
new PolarData{ x= "Apr", low= 3.1, high= 10.8 },
new PolarData{ x="May", low= 5.7, high= 14.40 },
new PolarData { x= "Jun", low= 8.4, high= 16.90 },
new PolarData { x= "Jul", low= 10.6,high= 19.20 },
new PolarData { x= "Aug", low= 10.5,high= 18.9 },
new PolarData { x= "Sep", low= 8.5, high= 16.1 },
new PolarData { x= "Oct", low= 6.0, high= 12.5 },
new PolarData { x= "Nov", low= 1.5, high= 6.9 },
new PolarData { x= "Dec", low= 5.1, high= 12.1 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public string x;
public double low;
public double high;
}Scatter
To render a scatter draw type, use series drawType as Scatter.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.Scatter">
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x="2005", y= 28 },
new PolarData{ x="2006", y= 25 },
new PolarData{ x="2007", y= 26 },
new PolarData{ x="2008", y= 27 },
new PolarData{ x="2009", y= 32 },
new PolarData{ x="2010", y= 35 },
new PolarData{ x="2011", y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public string x;
public double y;
}Radar Chart
To render a radar series, use series type as Radar.
Draw Type
Line
To render a line draw type, use series drawType as Line. The 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.
<ejs-chart id="container">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Radar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.Line">
<e-series-marker visible="true" height="10" width="10" shape="Pentagon"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2005, y = 28 },
new PolarData{ x=2006, y = 25 },
new PolarData{ x=2007, y = 26 },
new PolarData{ x=2008, y = 27 },
new PolarData{ x=2009, y = 32 },
new PolarData{ x=2010, y = 35 },
new PolarData{ x=2011, y = 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
}Customization
Start Angle
You can customize the start angle of the polar series using startAngle property. By default, startAngle is 0 degree.
<ejs-chart id="container">
<e-chart-primaryxaxis startAngle="270"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Radar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.Line">
<e-series-marker visible="true" height="10" width="10" shape="Pentagon"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2005, y = 28 },
new PolarData{ x=2006, y = 25 },
new PolarData{ x=2007, y = 26 },
new PolarData{ x=2008, y = 27 },
new PolarData{ x=2009, y = 32 },
new PolarData{ x=2010, y = 35 },
new PolarData{ x=2011, y = 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
}Coefficient in axis
You can customize the radius of the polar series and radar series using coefficient property. By default, coefficient is 100.
<ejs-chart id="container">
<e-chart-primaryxaxis coefficient="40"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Radar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.Line">
<e-series-marker visible="true" height="10" width="10" shape="Pentagon"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2005, y = 28 },
new PolarData{ x=2006, y = 25 },
new PolarData{ x=2007, y = 26 },
new PolarData{ x=2008, y = 27 },
new PolarData{ x=2009, y = 32 },
new PolarData{ x=2010, y = 35 },
new PolarData{ x=2011, y = 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
}