Spline Range Area in ASP.NET MVC Charts Component

17 Apr 202310 minutes to read

Spline Range Area

The Spline Range Area Chart is used to display continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories.

To render a spline range area series, use series Type as SplineRangeArea.

@Html.EJS().Chart("container").Series(series =>
    {
        series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).
        Opacity(0.4).
        XName("x").
        High("high").
        Low("low").
        DataSource(ViewBag.dataSource).
        Name("England").
        Add();

        series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).
        Opacity(0.4).
        XName("x").
        High("high1").
        Low("low1").
        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))
    )
    .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 Spline Range Area series.

@Html.EJS().Chart("container").Series(series =>
    {
        series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).
        Opacity(0.5).
        Border(br => br.Width(2).Color("red")).DashArray("5,5").Fill("blue").
        XName("x").
        High("high").
        Low("low").
        DataSource(ViewBag.dataSource).
        Name("England").
        Add();

        series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea).
        Opacity(0.5).
        Border(br => br.Width(2).Color("yellow")).DashArray("5,5").Fill("green").
        XName("x").
        High("high1").
        Low("low1").
        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))
    )
    .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;
}

See Also