Example of automatic pan right on zoom in Charts

Radzen.Blazor Components
1

Is there an example of automatically panning to the left/right side of a series chart when zooming in? Currently the chart always defaults to middle but as I need to always see the latest data (right in this example) in the chart, I need to be able to have the chart automatically pin to the right side of the range while it zooms in. I expect this would be something to do with manipulating the ViewStart/End values? I’m doing this in the ViewStart/End change calls.

2

There is no built-in "anchor to the right" option, but you can do it from the ViewChange event. It fires after every mouse wheel zoom and scrollbar pan with the range the chart is about to show, and the handler can rewrite the bound ViewStart/ViewEnd to keep the right edge pinned:

<RadzenChart AllowZoom="true" AllowPan="true" @bind-ViewStart="@start" @bind-ViewEnd="@end" ViewChange="@OnViewChange">
    ...
</RadzenChart>

@code {
    double start = 0;
    double end = 1;

    void OnViewChange(ChartViewChangeEventArgs args)
    {
        var range = args.ViewEnd - args.ViewStart;
        start = 1 - range;
        end = 1;
    }
}

ViewStart and ViewEnd are fractions (0-1) of the full category range, so 1 - range keeps the zoom level and slides the window to the latest data. If you still want the scrollbar to pan, only re-anchor when the range changed (a zoom) and leave the values alone when it did not (a pan).

The same works for programmatic zoom - set start = 1 - 100.0 / zoomPercent; end = 1; instead of the Zoom parameter, which always zooms around the current center.

While checking this I found that the chart ignored the values a ViewChange handler assigns during a mouse wheel zoom and kept the cursor-centered range, so the code above only took effect on the next render. This is fixed and will be in the next release later today.

3

Thank you for the quick reply. I’ll have another look at my implementation but I think I’m pretty close to what you have here and potentially the change in the next version will provide a smotther experience.