Step area in ASP.NET CORE Charts component
20 Dec 20236 minutes to read
Step area
To render a step area series, use series Type as StepArea.
<ejs-chart id="container">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StepArea">
</e-series>
</e-series-collection>
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart-primaryxaxis>
</ejs-chart>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.
<ejs-chart id="container">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="low" fill="blue" opacity="0.5"
dashArray="5,5" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StepArea" step="@Syncfusion.EJ2.Charts.StepPosition.Right">
<e-series-border width="2" color="black"></e-series-border>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="high" fill="green" opacity="0.5"
dashArray="5,5" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StepArea" step="@Syncfusion.EJ2.Charts.StepPosition.Right">
<e-series-border width="2" color="black"></e-series-border>
</e-series>
</e-series-collection>
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
</e-chart-primaryxaxis>
</ejs-chart>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;
}