Spline Range Area in ASP.NET MVC Charts Component
17 Apr 202310 minutes to read
Spline Range Area
The Spline Range Area Chart is used to display continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories.
To render a spline range area series, use series Type
as SplineRangeArea
.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).
Opacity(0.4).
XName("x").
High("high").
Low("low").
DataSource(ViewBag.dataSource).
Name("England").
Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).
Opacity(0.4).
XName("x").
High("high1").
Low("low1").
DataSource(ViewBag.dataSource).
Name("India").
Add();
})
.PrimaryXAxis(px =>
px.MajorGridLines(mg => mg.Width(0))
.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(py =>
py.LabelFormat("{value}˚C")
.Minimum(0)
.Maximum(40)
.MajorTickLines(mt => mt.Width(0))
.LineStyle(ls => ls.Width(0))
)
.Render()
public IActionResult Index () {
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x = "Jan", high = 14, low = 4, high1 = 29, low1 = 19 },
new ChartData { x = "Feb", high = 17, low = 7, high1 = 32, low1 = 22 },
new ChartData { x = "Mar", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Apr", high = 22, low = 12, high1 = 37, low1 = 27 },
new ChartData { x = "May", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Jun", high = 17, low = 7, high1 = 32, low1 = 22 },
new ChartData { x = "Jul", high = 15, low = 5, high1 = 30, low1 = 20 },
new ChartData { x = "Aug", high = 17, low = 7, high1 = 32, low1 = 22 },
new ChartData { x = "Sep", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Oct", high = 22, low = 12, high1 = 37, low1 = 27 },
new ChartData { x = "Nov", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Dec", high = 17, low = 7, high1 = 32, low1 = 22 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double high;
public double low;
public double high1;
public double low1;
}
Series customization
The following properties can be used to customize the Spline Range Area
series.
- Fill – Specifies the color of the series.
- Opacity – Specifies the opacity of Fill.
- DashArray – Specifies the dashes for series.
-
ChartSeriesBorder – Specifies the
Color
andWidth
of series border.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).
Opacity(0.5).
Border(br => br.Width(2).Color("red")).DashArray("5,5").Fill("blue").
XName("x").
High("high").
Low("low").
DataSource(ViewBag.dataSource).
Name("England").
Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).
Opacity(0.5).
Border(br => br.Width(2).Color("yellow")).DashArray("5,5").Fill("green").
XName("x").
High("high1").
Low("low1").
DataSource(ViewBag.dataSource).
Name("India").
Add();
})
.PrimaryXAxis(px =>
px.MajorGridLines(mg => mg.Width(0))
.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(py =>
py.LabelFormat("{value}˚C")
.Minimum(0)
.Maximum(40)
.MajorTickLines(mt => mt.Width(0))
.LineStyle(ls => ls.Width(0))
)
.Render()
public IActionResult Index () {
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x = "Jan", high = 14, low = 4, high1 = 29, low1 = 19 },
new ChartData { x = "Feb", high = 17, low = 7, high1 = 32, low1 = 22 },
new ChartData { x = "Mar", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Apr", high = 22, low = 12, high1 = 37, low1 = 27 },
new ChartData { x = "May", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Jun", high = 17, low = 7, high1 = 32, low1 = 22 },
new ChartData { x = "Jul", high = 15, low = 5, high1 = 30, low1 = 20 },
new ChartData { x = "Aug", high = 17, low = 7, high1 = 32, low1 = 22 },
new ChartData { x = "Sep", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Oct", high = 22, low = 12, high1 = 37, low1 = 27 },
new ChartData { x = "Nov", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Dec", high = 17, low = 7, high1 = 32, low1 = 22 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double high;
public double low;
public double high1;
public double low1;
}