Range step area in ASP.NET CORE Charts component

24 Sep 202414 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.

<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;
        }

No risers

You can eliminate the vertical lines between points by using the NoRisers property in a series. This approach is useful for highlighting trends without the distraction of risers.

<ejs-chart id="container" title="Monthly Temperature Range">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" title="Month" edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis labelFormat="{value}˚C" minimum="10" maximum="40" title="Temperature">
        <e-linestyle width="0"></e-linestyle>
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="X" high="High" low="Low" noRisers="true" 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 = 29, Low = 19 },
        new ChartData { X = "Feb", High = 32, Low = 22 },
        new ChartData { X = "Mar", High = 35, Low = 25 },
        new ChartData { X = "Apr", High = 37, Low = 27 },
        new ChartData { X = "May", High = 35, Low = 25 },
        new ChartData { X = "Jun", High = 32, Low = 22 },
        new ChartData { X = "Jul", High = 30, Low = 20 },
        new ChartData { X = "Aug", High = 32, Low = 22 },
        new ChartData { X = "Sep", High = 35, Low = 25 },
        new ChartData { X = "Oct", High = 37, Low = 27 },
        new ChartData { X = "Nov", High = 35, Low = 25 },
        new ChartData { X = "Dec", High = 32, Low = 22 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string X;
    public double High;
    public double Low;
}

See also