Range Column in ASP.NET CORE Charts Component
17 Apr 202310 minutes to read
Range Column
To render a range column series, use series Type
as RangeColumn
.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low" name="India" width=2
type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn"></e-series>
<e-series dataSource="ViewBag.dataSource1" xName="x" high="high" low="low" name="Germany" width=2
type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<RangeColumnChartData> chartData = new List<RangeColumnChartData>
{
new RangeColumnChartData { x= "Sun", low= 3.1, high= 10.8 },
new RangeColumnChartData { x= "Mon", low= 5.7, high= 14.4 },
new RangeColumnChartData { x= "Tue", low= 8.4, high= 16.9 },
new RangeColumnChartData { x= "Wed", low= 10.6, high= 19.2 },
new RangeColumnChartData { x= "Thu", low= 8.5, high= 16.1 },
new RangeColumnChartData { x= "Fri", low= 6.0, high= 12.5 },
new RangeColumnChartData { x= "Sat", low= 1.5, high= 6.9 }
};
ViewBag.dataSource = chartData;
List<RangeColumnChartData> chartData1 = new List<RangeColumnChartData>
{
new RangeColumnChartData { x= "Sun", low= 2.5, high= 9.8 },
new RangeColumnChartData { x= "Mon", low= 4.7, high= 11.4 },
new RangeColumnChartData { x= "Tue", low= 6.4, high= 14.4 },
new RangeColumnChartData { x= "Wed", low= 9.6, high= 17.2 },
new RangeColumnChartData { x= "Thu", low= 7.5, high= 15.1 },
new RangeColumnChartData { x= "Fri", low= 3.0, high= 10.5 },
new RangeColumnChartData { x= "Sat", low= 1.2, high= 7.9 }
};
ViewBag.dataSource1 = chartData1;
return View();
}
public class RangeColumnChartData
{
public string x;
public double low;
public double high;
}
Series customization
The following properties can be used to customize the Range Column
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. - ColumnSpacing – Specifies the space between the series segments.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low" width=2 fill="green"
columnSpacing="0.4" dashArray="5,5" opacity="0.7" type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn">
<e-series-border width="2" color="green"></e-series-border>
</e-series>
<e-series dataSource="ViewBag.dataSource1" xName="x" high="high" low="low" width=2 fill="red"
columnSpacing="0.4" dashArray="5,5" opacity="0.7" type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn">
<e-series-border width="2" color="red"></e-series-border>
</e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<RangeColumnChartData> chartData = new List<RangeColumnChartData>
{
new RangeColumnChartData { x= "Sun", low= 3.1, high= 10.8 },
new RangeColumnChartData { x= "Mon", low= 5.7, high= 14.4 },
new RangeColumnChartData { x= "Tue", low= 8.4, high= 16.9 },
new RangeColumnChartData { x= "Wed", low= 10.6, high= 19.2 },
new RangeColumnChartData { x= "Thu", low= 8.5, high= 16.1 },
new RangeColumnChartData { x= "Fri", low= 6.0, high= 12.5 },
new RangeColumnChartData { x= "Sat", low= 1.5, high= 6.9 }
};
ViewBag.dataSource = chartData;
List<RangeColumnChartData> chartData1 = new List<RangeColumnChartData>
{
new RangeColumnChartData { x= "Sun", low= 2.5, high= 9.8 },
new RangeColumnChartData { x= "Mon", low= 4.7, high= 11.4 },
new RangeColumnChartData { x= "Tue", low= 6.4, high= 14.4 },
new RangeColumnChartData { x= "Wed", low= 9.6, high= 17.2 },
new RangeColumnChartData { x= "Thu", low= 7.5, high= 15.1 },
new RangeColumnChartData { x= "Fri", low= 3.0, high= 10.5 },
new RangeColumnChartData { x= "Sat", low= 1.2, high= 7.9 }
};
ViewBag.dataSource1 = chartData1;
return View();
}
public class RangeColumnChartData
{
public string x;
public double low;
public double high;
}