NumericAxis.razor

@page "/RangeSelector/NumericAxis"
@using Syncfusion.EJ2.Blazor.Charts
@using Newtonsoft.Json

@inherits SampleBaseComponent;
@if (ausData == null && slData == 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;">Score Comparision AUS vs SL</h4>
    <div id="container">
        <EjsRangeNavigator LabelPosition="AxisPosition.Outside" Value="@value">
            <RangeNavigatorEvents Changed="onRangeChanged"></RangeNavigatorEvents>
			<RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>
            <RangeNavigatorSeriesCollection>
                <RangeNavigatorSeries DataSource="@ausData" Width="2" XName="x" Type="RangeNavigatorType.Line" YName="y">
                </RangeNavigatorSeries>
                <RangeNavigatorSeries DataSource="@slData" Width="2" XName="x" Type="RangeNavigatorType.Line" YName="y">
                </RangeNavigatorSeries>
            </RangeNavigatorSeriesCollection>
        </EjsRangeNavigator>
    </div>
    <div id="chartcontainer">
        <EjsChart>
            <ChartArea><ChartAreaBorder Width="0" Color="transparent"></ChartAreaBorder></ChartArea>
            <ChartPrimaryXAxis EdgeLabelPlacement="EdgeLabelPlacement.Shift" Title="Overs" ZoomFactor="@ZF" ZoomPosition="@ZP">
                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            </ChartPrimaryXAxis>
            <ChartPrimaryYAxis Minimum="0" Title="Runs">
                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            </ChartPrimaryYAxis>
            <ChartAnnotations>
                <ChartAnnotation Content="<div id='exchangeRate'></div>" X="85%" Y="15%" CoordinateUnits='Syncfusion.EJ2.Blazor.Charts.Units.Pixel' Region="Regions.Chart"></ChartAnnotation>
            </ChartAnnotations>
            <ChartSeriesCollection>
                <ChartSeries DataSource="@ausData" XName="x" YName="y" Name="AUS" Width="2" Type="ChartSeriesType.Spline">
                    <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
                </ChartSeries>
                <ChartSeries DataSource="@slData" XName="x" YName="y" Name="SL" Width="2" Type="ChartSeriesType.Spline">
                    <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
                </ChartSeries>
            </ChartSeriesCollection>
            <ChartTooltipSettings Enable="false" Shared="false"></ChartTooltipSettings>
            <ChartLegendSettings Visible="false"></ChartLegendSettings>
        </EjsChart>
    </div>
</div>
}
@code{
     private ChartData[] ausData;
     private ChartData[] slData;
	double ZF = 1;
    double ZP = 0;
    protected override async Task OnInitializedAsync()
    {
	    await Task.Run(() =>
        {
		    ausData = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/scripts/range-navigator/double_data_aus.json"));
		    slData = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/scripts/range-navigator/double_data_sl.json"));
        });
    }
    public class ChartData
    {
        public double x { get; set; }
        public double y { get; set; }
        public bool isWicket { get; set; }
    }
    private int[] value = new int[] {31,50};
	public void onRangeChanged(IChangedEventArgs args)
    {
        ZF = args.ZoomFactor;
        ZP = args.ZoomPosition;
        StateHasChanged();
    }  
}