- Radar
- Binding data with series
- Customization
- Empty points
- Events
- See Also
Contact Support
Radar in ASP.NET MVC Charts Component
8 Oct 202424 minutes to read
Radar
To render a radar series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this:
Set the series type: Define the series Type
as Radar in your chart configuration. This indicates that the data should be represented as a radar chart, which is ideal for plotting data points on a circular grid.
@Html.EJS().Chart("container").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).Title("Alaska Weather Statistics - 2016").Render()
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;
}
Draw type
Similar to the polar chart, use the DrawType
property to change the series plotting type in a Radar chart to line, column, area, range column, spline, scatter, stacking area, spline area, or stacking column. The default value of DrawType
is Line.
@Html.EJS().Chart("container").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).Title("Alaska Weather Statistics - 2016").Render()
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;
}
Binding data with series
You can bind data to the chart using the DataSource
property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series XName
and YName
properties.
@Html.EJS().Chart("container").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).Title("Alaska Weather Statistics - 2016").Render()
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 radar series using StartAngle
property. By default, startAngle is 0 degree.
@Html.EJS().Chart("container").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).StartAngle(120)
).Title("Alaska Weather Statistics - 2016").Render()
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;
}
Radius
You can customize the radius of the radar series using Coefficient
property. By default, Coefficient
is 100.
@Html.EJS().Chart("container").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Coefficient(80)
).Title("Alaska Weather Statistics - 2016").Render()
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;
}
Empty points
Data points with null or undefined values are considered empty. Empty data points are ignored and not plotted on the chart.
Mode
Use the Mode
property to define how empty or missing data points are handled in the series. The default mode for empty points is Gap.
@Html.EJS().Chart("container").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.EmptyPointSettings(empty => empty.Mode(Syncfusion.EJ2.Charts.EmptyPointMode.Zero))
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).Title("Alaska Weather Statistics - 2016").Render()
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 = null },
new PolarData{ x=2008, y = 27 },
new PolarData{ x=2009, y = 32 },
new PolarData{ x=2010, y = null },
new PolarData{ x=2011, y = 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
}
Fill
Use the Fill
property to customize the fill color of empty points in the series.
@Html.EJS().Chart("container").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.EmptyPointSettings(empty => empty.Mode(Syncfusion.EJ2.Charts.EmptyPointMode.Zero).Fill("red"))
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true).IsFilled(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).Title("Alaska Weather Statistics - 2016").Render()
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 = null },
new PolarData{ x=2008, y = 27 },
new PolarData{ x=2009, y = 32 },
new PolarData{ x=2010, y = null },
new PolarData{ x=2011, y = 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
}
Border
Use the Border
property to customize the width and color of the border for empty points.
@Html.EJS().Chart("container").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.EmptyPointSettings(empty => empty.Mode(Syncfusion.EJ2.Charts.EmptyPointMode.Zero)..EmptyPointSettings(empty => empty.Mode(Syncfusion.EJ2.Charts.EmptyPointMode.Zero).Border(border => border.Width(2).Color("green"))))
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true).IsFilled(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).Title("Alaska Weather Statistics - 2016").Render()
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 = null },
new PolarData{ x=2008, y = 27 },
new PolarData{ x=2009, y = 32 },
new PolarData{ x=2010, y = null },
new PolarData{ x=2011, y = 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
}
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.
@Html.EJS().Chart("container").SeriesRender("changeColor").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).Title("Alaska Weather Statistics - 2016").Render()
<script>
function changeColor(args) {
args.fill = '#ff6347';
}
</script>
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;
}
Point render
The PointRender
event allows you to customize each data point before it is rendered on the chart.
@Html.EJS().Chart("container").PointRender("changeColor").Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Radar)
.DrawType(Syncfusion.EJ2.Charts.ChartDrawType.Line)
.Name("Warmest")
.XName("x")
.YName("y")
.Width(2)
.Marker(marker => marker.Visible(true))
.DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(xaxis =>
xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).Title("Alaska Weather Statistics - 2016").Render()
<script>
function changeColor(args) {
if (args.point.index % 2 !== 0) {
args.fill = '#ff6347';
}
else {
args.fill = '#009cb8';
}
}
</script>
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;
}