RangeArea.cshtml

@using Syncfusion.EJ2;
@section ControlsSection{
    <div class="control-section">
        <div style="text-align:center">

        @Html.EJS().Chart("container").Series(series =>
        {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.RangeArea).Opacity(0.4).Border(br=>br.Width(2)).XName("x").High("high").Low("low").DataSource("series1").Name("India").Add();

       }).PrimaryXAxis(px => px.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
       .MajorGridLines(mg=>mg.Width(0)).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
       ).PrimaryYAxis(py => py.LabelFormat("{value}˚C")
       .MajorTickLines(mt=>mt.Width(0)).LineStyle(ls=>ls.Width(0))
       ).Title("Temperature Variation").ZoomSettings(z => z.EnableSelectionZooming(true)
       .Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).ChartArea(area => area.Border(br=>br.Color("transparent"))
       ).Load("load").SeriesRender("seriesRender").LegendSettings(ls => ls.Visible(false)).Render()

        </div>
    </div>
         @*custom code start*@
    <style>
        #control-container {
            padding: 0px !important;
        }
    </style>
             @*custom code end*@
    <script>
        var series1 = [];
        var value = 35;
        var point1;
        for (var i = 1; i < 360; i++) {
            if (Math.random() > .5) {
                value += Math.random();
            }
            else {
                value -= Math.random();
            }
            point1 = {
                x: new Date(2015, 0, i),
                high: value, low: value - 10
            };
            series1.push(point1);
        }
                 @*custom code start*@
        var load = function (args) {
            var selectedTheme = themeName ? themeName : 'Material';
            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast');
            args.chart.width = ej.base.Browser.isDevice ? "100%" : "60%";
        };
                 @*custom code end*@
        var seriesRender = function (args) {
            var theme = args.series.chart.theme;
            var color;
            if (theme === 'Material') {
                color = '#008E83';
            }
            else if (theme === 'Bootstrap') {
                color = '#7953AC';
            }
            else {
                color = '#335693';
            }
            args.series.border.color = color;
        };
    </script>
}
         @*custom code start*@
@section Meta{
                    <meta name="description" content="This example demonstrates the Range Area in ASP.NET MVC Chart control. Explore here for more details."/>
                }
         @*custom code end*@
@section ActionDescription{
    <p>
    This sample visualizes the maximum and minimum temperatures  of different months with default range area series in the chart. Zoom the chart to check the temperature for week or day.
</p>
}
@section Description{
    <p>
    In this example, you can see how to render and configure the range area type chart. You can use <code>border</code>,
    <code>fill</code> properties to customize the area.
</p>
<p>
    Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p>
    More information on the range area series can be found in this
    <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
</p>
}
@section Title{
                    <title>ASP.NET MVC Chart Range Area Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of Range Area in ASP.NET MVC Chart Control</h1>
                }