How can the ZoomFactor and ZoomPosition of a Blazor Charts be dynamically updated using a Blazor Range Navigator?

This article explains how to update the chart’s ZoomFactor and ZoomPosition using an event in the Range Navigator.

Update Selected Data in Chart with Range Navigator Changed Event:

Blazor Charts provides an option to update the ZoomFactor and ZoomPosition of ExpandoObject chart data using the Range Navigator’s Changed event.

This can be achieved using property binding for chart’s x-axis ZoomFactor and ZoomPosition properties. In the Range Navigator’s Changed event, you can assign the event value to the chart’s ZoomFactor and ZoomPosition.

The code example below demonstrates how to update ZoomFactor and ZoomPosition.

Index. razor:

@using Syncfusion.Blazor.Charts
@using System.Dynamic
<SfRangeNavigator ValueType="RangeValueType.DateTime">
    <RangeNavigatorEvents Changed="OnRangeChanged"></RangeNavigatorEvents>
    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@MedalDetails" XName="X" Type="RangeNavigatorType.Area" YName="Y"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</SfRangeNavigator>
<SfChart Height="70%">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" ZoomFactor="@ZF" ZoomPosition="@ZP" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>
@code{
    double ZF = 1;
    double ZP = 0;
    private Random randomNum = new Random();
    public List<ExpandoObject> MedalDetails { get; set; } = new List<ExpandoObject>();
    protected override void OnInitialized()
    {
        MedalDetails = Enumerable.Range(1, 6).Select((x) =>
        {
            dynamic d = new ExpandoObject();
            d.X = new DateTime(1960, 1, 1).AddMonths(x + 1);
            d.Y = randomNum.Next(20, 80);
            return d;
        }).Cast<ExpandoObject>().ToList<ExpandoObject>();
    }
    public void OnRangeChanged(ChangedEventArgs args)
    {
        ZF = args.ZoomFactor;
        ZP = args.ZoomPosition;
        StateHasChanged();
    }
} 

The following screenshot illustrates the output of the code snippet.

Output:

Range Navigator Example Demo with ZoomFactor and ZoomPosition

Conclusion:

We hope you enjoyed learning how to update the chart’s ZoomFactor and ZoomPosition using an event in the Blazor Range Navigator.

You can refer to our Blazor Chart feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Charts and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!