RangeNavigator.razor

@page "/RangeSelector/RangeNavigator"
@using Syncfusion.EJ2.Blazor.Charts
@using Newtonsoft.Json
@inherits SampleBaseComponent;

@if (defaultData == null)
{
    <div class="stockchartloader"></div>
}
else
{
    <div class="control-section" align="center">
        <h4 id="default" style="font-family: Segoe UI;font-weight: 500; font-style:normal; font-size:15px;" align="center">Bitcoin (USD) Price Range</h4>
        <div id="container">
            <EjsRangeNavigator Value="@value" ValueType=Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime LabelFormat="MMM-yy">
                <RangeNavigatorStyleSettings UnselectedRegionColor="transparent"></RangeNavigatorStyleSettings>
                <RangeNavigatorRangeTooltipSettings Enable="true" DisplayMode="TooltipDisplayMode.Always" Format="MM/dd/yyyy"></RangeNavigatorRangeTooltipSettings>
                <RangeNavigatorSeriesCollection>
                    <RangeNavigatorSeries Fill="url(#material-gradient-chart)" DataSource="@defaultData" XName="x" Type="RangeNavigatorType.Area" YName="y" Width="2"></RangeNavigatorSeries>
                </RangeNavigatorSeriesCollection>
            </EjsRangeNavigator>
        </div>
    </div>

}

@code{
    private ChartData[] defaultData;
    protected override async Task OnInitializedAsync()
    {
        await Task.Run(() =>
        {
            defaultData = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/scripts/range-navigator/default_data.json"));
        });
    }
    public class ChartData
    {
        public DateTime x { get; set; }
        public double y { get; set; }
    }
    private DateTime[] value = new DateTime[] { new DateTime(2017, 09, 01), new DateTime(2018, 02, 01) };
}
<style>
    #control-container {
        padding: 0px !important;
    }

    #container {
        transform: translate(0, 25%);
    }

    #material-gradient-chart stop {
        stop-color: #00bdae;
    }

    #fabric-gradient-chart stop {
        stop-color: #4472c4;
    }

    #bootstrap-gradient-chart stop {
        stop-color: #a16ee5;
    }

    #bootstrap4-gradient-chart stop {
        stop-color: #a16ee5;
    }

    #highcontrast-gradient-chart stop {
        stop-color: #79ECE4;
    }

    .chart-gradient stop[offset="0"] {
        stop-opacity: 0.9;
    }

    .chart-gradient stop[offset="1"] {
        stop-opacity: 0.3;
    }
</style>
<svg style="height: 0">
    <defs>
        <linearGradient id="material-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0"></stop>
            <stop offset="1"></stop>
        </linearGradient>
        <linearGradient id="fabric-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0"></stop>
            <stop offset="1"></stop>
        </linearGradient>
        <linearGradient id="bootstrap-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0"></stop>
            <stop offset="1"></stop>
        </linearGradient>
        <linearGradient id="bootstrap4-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0"></stop>
            <stop offset="1"></stop>
        </linearGradient>
        <linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0"></stop>
            <stop offset="1"></stop>
        </linearGradient>
    </defs>
</svg>