Range step area in ASP.NET MVC Charts component

20 Dec 202311 minutes to read

Range step area

To render the range step area series, use the series Type as a RangeStepArea.

@Html.EJS().Chart("container").Series(series =>
    {
        series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.RangeStepArea).
        Opacity(0.4).
        XName("x").
        High("high").
        Low("low").
        DataSource(ViewBag.dataSource).
        Name("India").
        Add();
    })
    .PrimaryXAxis(px => 
        px.MajorGridLines(mg => mg.Width(0))
            .EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
            .ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
            .PrimaryYAxis(py => py.LabelFormat("{value}˚C")
            .Minimum(0)
            .Maximum(40)
            .MajorTickLines(mt => mt.Width(0))
            .LineStyle(ls => ls.Width(0))
    )
    .Title("Monthly Temperature Range").Render()
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.

@(Html.EJS().Chart("container").Series(series =>
    {
        series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.RangeStepArea).
        Opacity(0.7).
        Fill("blue").
        DashArray("5,5").
        Border(br => br.Width(2).Color("black")).
        XName("x").
        High("high1").
        Low("low1").
        Step(Syncfusion.EJ2.Charts.StepPosition.Center).
        DataSource(ViewBag.dataSource).
        Name("India").
        Add();
    })
    .PrimaryXAxis(px => 
        px.MajorGridLines(mg => mg.Width(0))
            .EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
            .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
    )
    .PrimaryYAxis(py => 
        py.LabelFormat("{value}˚C")
            .Minimum(0)
            .Maximum(40)
            .MajorTickLines(mt => mt.Width(0))
            .LineStyle(ls => ls.Width(0))
    )
    .Title("Monthly Temperature Range").Render())
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;
        }

See also