Syncfusion Blazor RangeBar Chart Scrolling Issue

[Ramesh S]

Hi,

I created a the following Range Bar chart with lazy loading with scrollbar. The height of the range bars varies if  I scroll the chart back and forth  when the data is loaded on demand. The range bars sometimes looks small or big when scrolled. Also the label displayed on a range bar is also wrapped when scrolling.  Please let me know if I missed something to handle this issue. I have attached the sample source code and screenshots for your reference.

Thanks.

Attachment: SyncFusionChartLazyLoadingApp_1d9bdf8a.zip

[Ilamathi Govindaraj]

Hi Ramesh,

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 16^th April 2024. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback Link : https://www.syncfusion.com/feedback/52461/the-height-of-the-range-bar-series-varies-when-scrolling-the-chart-and-the-labels

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,

Ilamathi Govindaraj.

[Ilamathi Govindaraj]

Hi Ramesh,

We are glad to announce that our v25.1.40 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:

In lazy loading, while scrolling the chart, the height of the range bar series dynamically changes as it adjusts according to the scrolling, resulting in it not maintaining a fixed height.

Fix:

During chart scrolling, we will now set the height of the range bar series to a fixed calculation. Additionally, we have made modifications to the sample by addressing the label wrap issue with the addition of CSS style.

Code Snippet:

<ChartAnnotations>

       @foreach (var annotation in Annotations)

       {

             <ChartAnnotation CoordinateUnits="Units.Point" X="annotation.XPoint"

                                       Y="@(annotation.YPoint.ToString())" Region="Regions.Series">

                    <ContentTemplate>

                         <div style="white-space: nowrap;">@annotation.Text</div>

                    </ContentTemplate>

             </ChartAnnotation>

       }

</ChartAnnotations>

Screenshot:

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

Sample :
https://www.syncfusion.com/downloads/support/directtrac/general/ze/RangeBarHeightAndLabelWrappedIssue885183131

Feedback Link : https://www.syncfusion.com/feedback/52461/the-height-of-the-range-bar-series-varies-when-scrolling-the-chart-and-the-labels

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.

Regards,

Ilamathi Govindaraj.