Range step area in ASP.NET CORE Charts component
20 Dec 202310 minutes to read
Range step area
To render the range step area series, use the series Type
as a RangeStepArea
.
<ejs-chart id="container" title="Monthly Temperature Range">
<e-chart-primaryxaxis valueType="Category" edgeLabelPlacement="Shift">
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="{value}˚C" minimum="0" maximum="40">
<e-linestyle width="0"></e-linestyle>
<e-majorticklines width="0"></e-majorticklines>
</e-chart-primaryyaxis>
<e-series-collection>
<e-series name="India" xName="x" high="high" low="low" dataSource="ViewBag.dataSource" opacity="0.4"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeStepArea">
</e-series>
</e-series-collection>
</ejs-chart>
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 Range 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
Color
andWidth
of series border. - Step – Specifies the position of the step for the series.
<ejs-chart id="container" title="Monthly Temperature Range">
<e-chart-primaryxaxis valueType="Category" edgeLabelPlacement="Shift">
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="{value}˚C" minimum="0" maximum="40">
<e-linestyle width="0"></e-linestyle>
<e-majorticklines width="0"></e-majorticklines>
</e-chart-primaryyaxis>
<e-series-collection>
<e-series name="India" xName="x" high="high1" low="low1" dataSource="ViewBag.dataSource" opacity="0.7"
fill="blue" dashArray="5,5" type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeStepArea" step="@Syncfusion.EJ2.Charts.StepPosition.Center">
<e-series-border width="2" color="black"></e-series-border>
</e-series>
</e-series-collection>
</ejs-chart>
public IActionResult Index ()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x = "Jan", high1 = 29, low1 = 19 },
new ChartData { x = "Feb", high1 = 32, low1 = 22 },
new ChartData { x = "Mar", high1 = 35, low1 = 25 },
new ChartData { x = "Apr", high1 = 37, low1 = 27 },
new ChartData { x = "May", high1 = 35, low1 = 25 },
new ChartData { x = "Jun", high1 = 32, low1 = 22 },
new ChartData { x = "Jul", high1 = 30, low1 = 20 },
new ChartData { x = "Aug", high1 = 32, low1 = 22 },
new ChartData { x = "Sep", high1 = 35, low1 = 25 },
new ChartData { x = "Oct", high1 = 37, low1 = 27 },
new ChartData { x = "Nov", high1 = 35, low1 = 25 },
new ChartData { x = "Dec", high1 = 32, low1 = 22 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double high1;
public double low1;
}