DateTimeAxis.razor

@page "/RangeSelector/DateTimeAxis"
@using Syncfusion.EJ2.Blazor.Charts
@using Newtonsoft.Json
@inherits SampleBaseComponent;
@if (dateTimeData == null)
{
    <div class="stockchartloader"></div>
}
else
{
    <div class="control-section" align="center">
            <h4 id="days" style="font-family: Segoe UI;font-weight: 500; font-style:normal; font-size:15px;">EUR Exchange Rate from USD</h4>
            <div id="container">
                <EjsRangeNavigator Value="@value" LabelPosition="AxisPosition.Outside" ValueType=Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime>
                    <RangeNavigatorEvents Changed="onRangeChanged"></RangeNavigatorEvents>
					<RangeNavigatorMajorGridLines Width="0"></RangeNavigatorMajorGridLines>
                    <RangeNavigatorRangeTooltipSettings Enable="true" Format="yyyy/MM/dd" DisplayMode="TooltipDisplayMode.Always"></RangeNavigatorRangeTooltipSettings>
                    <RangeNavigatorSeriesCollection>
                        <RangeNavigatorSeries Fill="url(#material-gradient-chart)" DataSource="@dateTimeData" Width="2" XName="x" Type="RangeNavigatorType.Area" YName="y">
                        </RangeNavigatorSeries>
                    </RangeNavigatorSeriesCollection>
                </EjsRangeNavigator>
            </div>
            <div id="chartcontainer">
                <EjsChart>
                    <ChartArea><ChartAreaBorder Width="0" Color="transparent"></ChartAreaBorder></ChartArea>
                    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift" ZoomFactor="@ZF" ZoomPosition="@ZP">
                        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
                    </ChartPrimaryXAxis>
                    <ChartPrimaryYAxis Interval="0.1" Minimum="0.6" Maximum="1" LabelFormat="n1">
                        <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
                        <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
                    </ChartPrimaryYAxis>
                    <ChartSeriesCollection>
                        <ChartSeries Fill="url(#material-gradient-chart)" DataSource="@dateTimeData" XName="x" YName="y" Name="Rate" Width="2" Type="ChartSeriesType.Spline">
                        </ChartSeries>
                    </ChartSeriesCollection>
                    <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical">
                        <ChartCrosshairLine Color="transparent" Width="0"></ChartCrosshairLine>
                    </ChartCrosshairSettings>
                    <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
                    <ChartLegendSettings Visible="false"></ChartLegendSettings>
                </EjsChart>
            </div>
        </div>
}
    @code{
        private ChartData[] dateTimeData;
		double ZF = 1;
        double ZP = 0;
        protected override async Task OnInitializedAsync()
        {
            await Task.Run(() =>
            {   
			    dateTimeData = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/scripts/range-navigator/stock-data.json"));
            });
        }
        public class ChartData
        {
            public DateTime x { get; set; }
            public double y { get; set; }
        }      
        private DateTime[] value = new DateTime[] { new DateTime(2011, 01, 01), new DateTime(2013, 12, 31) };
      
        public void onRangeChanged(IChangedEventArgs args)
        {
            ZF = args.ZoomFactor;
        ZP = args.ZoomPosition;
        StateHasChanged();
        }       
}
    <style>
        #control-container {
            padding: 0px !important;
        }

        #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>