Selection zooming not working when displaying inverted x-axis in chart

[Armin Stockner]

Hello,

in our code base (blazor wasm) we display a chart using an inverted x-axis by setting the "IsInversed" property of "ChartPrimaryXAxis":

<SfChart Theme="Syncfusion.Blazor.Theme.Fluent2" Width="100%" Height="100%" Title="@Title" EnableAnimation="false">

     <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

    <ChartEvents OnZoomEnd="OnZoomEnd" />

    <ChartPrimaryXAxis Title="X" IsInversed="true" Minimum="1" Maximum="1000" Interval="500" ValueType="Syncfusion.Blazor.Charts.ValueType.Double" EdgeLabelPlacement="EdgeLabelPlacement.Shift" LabelIntersectAction="LabelIntersectAction.Trim">

        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

        <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

        <ChartAxisLabelStyle Size="11px"></ChartAxisLabelStyle>

    </ChartPrimaryXAxis>

    <ChartPrimaryYAxis Title="Y" Minimum="0" Maximum="100" Interval="5">

        <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

        <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

        <ChartAxisLabelStyle Size="11px"></ChartAxisLabelStyle>

        <ChartAxisTitleStyle Size="13px"></ChartAxisTitleStyle>

    </ChartPrimaryYAxis>

    <ChartLegendSettings Visible="false"></ChartLegendSettings>

    <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>

    <ChartZoomSettings ToolbarDisplayMode="ToolbarMode.Always" EnableSelectionZooming="true" Mode="ZoomMode.XY" >

    </ChartZoomSettings>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@DataSource" XName="X" YName="Y" Opacity="1" Width="1" Type="ChartSeriesType.Line" Fill="#2485FA">

            <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

Unfortunately when the "IsInversed" property is set, selection zooming no longer works. On selecting an area in the chart to zoom in, the zoom area is in the wrong position, it is always at the start of the x-axis. When trying to pan the zoom area, the area is not moved along the x-axis. Move along the y-axis work though.

Any idea what the problem might be? Is this a bug? When remove the "IsInversed" the zooming behaviour works as expected. 

Thank you

[Durga Gopalakrishnan]

Hi Armin,

Greetings from Syncfusion.

We have considered your reported scenario as bug and logged a defect report for the issue ”Chart zooming and panning is not proper for inversed axis”. This fix will be available in our weekly patch release which is scheduled to be rolled out on 20^th August 2024. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback : https://www.syncfusion.com/feedback/60257/chart-zooming-and-panning-is-not-proper-for-inversed-axis

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Durga Gopalakrishnan.

[Durga Gopalakrishnan]

Armin,

We are glad to announce that our v26.2.10 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.Charts NuGet package.

Root Cause:

The visible range is not calculated properly for the inversed axis when zooming and panning the chart.

Fix:

Recalculated the X-axis visible range values accurately for the inversed axis.

NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.Charts/

Sample : https://blazorplayground.syncfusion.com/rZLJtPLXznHwMdfF

Feedback : https://www.syncfusion.com/feedback/60257/chart-zooming-and-panning-is-not-proper-for-inversed-axis

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.