Range Area in ASP.NET CORE Charts Component

17 Apr 20236 minutes to read

Range Area

To render a range area series, use series Type as RangeArea.

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category">
    </e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeArea"></e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
               new AxisLabelData { x= "Sun", low= 2.5, high= 9.8 },
               new AxisLabelData { x= "Mon", low= 4.7, high= 11.4 },
               new AxisLabelData { x= "Tue", low= 6.4, high= 14.4 },
               new AxisLabelData { x= "Wed", low= 9.6, high= 17.2 },
               new AxisLabelData { x= "Thu", low= 7.5, high= 15.1 },
               new AxisLabelData { x= "Fri", low= 3.0, high= 10.5 },
               new AxisLabelData { x= "Sat", low= 1.2, high= 7.9 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double low;
            public double high;
        }

Series customization

The following properties can be used to customize the Range Area series.

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category">
    </e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeArea" opacity="0.5" dashArray="5,5" fill="blue">
            <e-series-border width="2" color="red"></e-series-border>
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
               new AxisLabelData { x= "Sun", low= 2.5, high= 9.8 },
               new AxisLabelData { x= "Mon", low= 4.7, high= 11.4 },
               new AxisLabelData { x= "Tue", low= 6.4, high= 14.4 },
               new AxisLabelData { x= "Wed", low= 9.6, high= 17.2 },
               new AxisLabelData { x= "Thu", low= 7.5, high= 15.1 },
               new AxisLabelData { x= "Fri", low= 3.0, high= 10.5 },
               new AxisLabelData { x= "Sat", low= 1.2, high= 7.9 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double low;
            public double high;
        }

See Also