Step area in ASP.NET MVC Charts component
20 Dec 20236 minutes to read
Step area
To render a step area series, use series Type as StepArea.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepArea).
XName("x").
High("high").
Low("low").
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Render()public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData { x= "Sun", low= 2.5, high= 9.8 },
new PolarData { x= "Mon", low= 4.7, high= 11.4 },
new PolarData { x= "Tue", low= 6.4, high= 14.4 },
new PolarData { x= "Wed", low= 9.6, high= 17.2 },
new PolarData { x= "Thu", low= 7.5, high= 15.1 },
new PolarData { x= "Fri", low= 3.0, high= 10.5 },
new PolarData { x= "Sat", low= 1.2, high= 7.9 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double low;
public double high;
}Series customization
The following properties can be used to customize the Step Area series.
- Fill – Specifies the color of the series.
- Opacity – Specifies the opacity of Fill.
- DashArray – Specifies the dashes for series.
-
ChartSeriesBorder – Specifies the
ColorandWidthof series border. - Step – Specifies the position of the step for the series.
@(Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepArea).
XName("x").
YName("high").
Fill("blue").
Border(br => br.Width(2).Color("black")).
Opacity(0.5).
DashArray("5,5").
Step(Syncfusion.EJ2.Charts.StepPosition.Right).
DataSource(ViewBag.dataSource).
Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepArea).
XName("x").
YName("low").
Fill("green").
Border(br => br.Width(2).Color("black")).
Opacity(0.5).
DashArray("5,5").
Step(Syncfusion.EJ2.Charts.StepPosition.Right).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Render())public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData { x= "Sun", low= 2.5, high= 9.8 },
new PolarData { x= "Mon", low= 4.7, high= 11.4 },
new PolarData { x= "Tue", low= 6.4, high= 14.4 },
new PolarData { x= "Wed", low= 9.6, high= 17.2 },
new PolarData { x= "Thu", low= 7.5, high= 15.1 },
new PolarData { x= "Fri", low= 3.0, high= 10.5 },
new PolarData { x= "Sat", low= 1.2, high= 7.9 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public string x;
public double low;
public double high;
}