100% Stacked Bar - Same height for all rows and enable vertical scrollbar

[Victor]

Hello,

I am using the 100% Stacked Bar Blazor Chart Component and my question is how can I make the chart scrollable vertically in case there are many rows.

To be more specific, lets say i have the following chart:

           If I add more rows, the height of each row is reduced, as seen below:

I want all rows to have the height of the first image(or specific height based on parameter), display the first 6 (or specific number based on parameter) and enable vertical scrollbar, if there many rows .

Thanks in advance.

[Durga Gopalakrishnan]

Hi Victor,

Greetings from Syncfusion.

By default, for bar type charts, bar width will be changed automatically based on data point count and axis height. We request you to use ZoomFactor for ChartPrimaryXAxis to view the particular set of data at initial rendering and by moving scrollbar, you can view next set of data. We have prepared sample based on your requirement.

<SfChart>

  <ChartPrimaryXAxis ZoomFactor=0.5></ChartPrimaryXAxis>

  <ChartZoomSettings EnableScrollbar="true" ToolbarItems="@ToolbarItem">

  </ChartZoomSettings>

</SfChart>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/VerticalScroller-2004918303.zip

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Victor]

Thank you so much for your prompt response!

Is there any way of using the mouse scroll wheel instead of moving the scrollbar? 

Many thanks in advance!

[Durga Gopalakrishnan]

Victor,

Most welcome. You can place the cursor in chart axis scrollbar and perform mousewheel to move the scrollbar to top or bottom position based on its scrolling. Please let us know if you have any concerns.

[Victor]

Hello, 

I think you misunderstood my request. Please let me explain this a bit.

All I want to do is to display 6 bars and navigate through the collection with mouse scroll.

So, let's say i have the following grid: 

If I apply the solution you provided above ( Zoomfactor = 0.5 and EnableScrollbar = true), the result is the following:

As you can see from the above picture, there are displayed 11 rows. Furthermore, if I drag the arrows from the scrollbar, the set of data grows or shrinks (which is not something desirable).

The ideal solution would be something like this(static scrollbar, 6 bars in the chart viewport and scroll using the mouse on chart hover: 

Thanks in advance!

[Durga Gopalakrishnan]

Victor,

# 1 : All I want to do is to display 6 bars

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 14^th February 2023. 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/40716/chart-lazy-loading-is-not-working-properly

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.

# 2 : If I drag the arrows from the scrollbar, the set of data grows or shrinks

By default, while dragging the arrow, scrollbar size will be increased, so column rectangle width will be changed automatically. It is an actual behavior.

# 3 : Scroll using the mouse on chart hover

As of now, we don’t have support to scroll the data points using mouse scroll.

Please let us know if you have any other concerns.

[Durga Gopalakrishnan]

Victor,

# 1 : All I want to do is to display 6 bars.

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

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

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/LazyLoad-1162857927.zip

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.

[Victor]

Hello,

I would like to ask if there is any possibility to implement the functionality in the near future. To be more precise, a parameter (ex. Render Visible Items) should be available, with the following options:

1. Render Visible Items : Auto (This is the default functionality which renders all the elements in the viewport, reducing the row height).
2. Render Visible Items : N where N=1,2... ​(This option should render N items in the viewport. A scrollbar should be available in order to view a particular set o N items).

I believe that this proposal will enhance the functionality of the SfChart and of course it will cover our needs.

Thank you in advance.

[Durga Gopalakrishnan]

Victor,

Your requirement meets the lazy loading feature which we have suggested in previous update. By default, the axis PointsLength property specifies total number of data points in chart series. When its value is 1000 then 1000 points will be viewed by moving the axis scrollbar.

You can specify the number of data points to be displayed in chart at initial rendering by assigning required data count for the chart and in ScrollChange event you can change the minimum and maximum value based on your requirement.

We have prepared sample based on your requirement. In an attached sample, at initial rendering we have displayed 100 data points and scroll move we have displayed 150 data points. Please check with the below snippet and sample.

<SfChart >

 <ChartEvents OnScrollChanged="@ScrollChange"></ChartEvents>

  <ChartPrimaryXAxis>

     <ChartAxisScrollbarSettings PointsLength="1000"></ChartAxisScrollbarSettings>

  </ChartPrimaryXAxis>

</SfChart>

public List<ColumnChartData> GetData()

    {

        List<ColumnChartData> data = new List<ColumnChartData>();

        for (; count < 100; count++)

        {

            data.Add(new ColumnChartData

                {

                    x = count,

                    y = random.Next(10, 100)

                });

        }

        return data;

    }

public void ScrollChange(ScrollEventArgs e)

    {

              this.dataSource = GetRangeData(Convert.ToInt32(e.CurrentRange.Minimum), Convert.ToInt32(e.CurrentRange.Minimum) + 100);

StateHasChanged();

       }

public List<ColumnChartData> GetRangeData(int min, int max)

    {

       List<ColumnChartData> data = new List<ColumnChartData>();

        max = max + 50;

        for (; min < max; min++)

        {

            data.Add(new ColumnChartData

                {

                    x = min,

                    y = random.Next(10, 100)

                });

        }

        return data;

    }

Screenshots :

Initial Rendering

After Scrolling

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BarLazyLoad-2067950340.zip

Please let us know if you have any concerns.

[Victor]

Hello,

Thanks again for your prompt response. I changed a bit the parameters and decreased the demo values in order to simulate the scenario of 6 elements for initial rendering + display always 6 elements on scrolling , and it seems to be working.

Unfortunately, there are still some issues that does not cover our needs and it does not work as expected, which are:

1. The scrolling operation cannot be performed using the mouse wheel over the grid.
2. There are animation issues and the scrolling does not perform smoothly when scrolling by clicking the scrollbar.
3. There are animation issues and the scrolling does not perform smoothly when dragging the arrows in the scrollbar.
4. The scrollbar is displayed in bottom rather than top, so the scroll is operating towards top rather than towards bottom.

An example of the ideal functionality is displayed below:

1. Initial rendering:

2. [Perform mousewheel scroll over the grid / Hide arrows from the scrollbar]:

3. Result after the scroll:

Awaiting for your response.

Thank you in advance,

Victor

[Durga Gopalakrishnan]

Victor,

We have analyzed your reported scenarios. Please check with the below suggestions.

# 1 : The scrolling operation cannot be performed using the mouse wheel over the grid.

# 2 : scrolling does not perform smoothly when scrolling by clicking the scrollbar.

We have considered your reported scenario as improvement and logged a feature request on this. Based on other logged tasks priority, we will include this improvement in any of our upcoming release. You can keep track of an improvement from the feedback portal below. 

  

Feedback Link :  https://www.syncfusion.com/feedback/41864/scrolling-support-by-clicking-and-mouse-wheel-scrolling-of-scrollbar

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.

# 3 : When dragging the arrows in the scrollbar.

# 4 : The scrollbar is displayed in bottom rather than top, so the scroll is operating towards top rather than towards bottom.

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our upcoming Volume 1 Main Release which is expected to be rolled out at end of March 2023. 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/41867/scrolling-is-not-proper-when-axis-is-inversed-and-dragging-arrows

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.

We have ensured the reported scenarios in Blazor Server Application; moving the axis scrollbar is proper as per behavior. We request you to share whether you are using WASM or Server application, browser type and your system configuration, so that it will be helpful to validate from our end.

Please let us know if you have any concerns.

[Victor]

Hello,

Thank you once again for the prompt response. Congratulations for the fast response and the provided support.

I would like to inform you that I'm using the Syncfusion Blazor components in  .NET MAUI Blazor application.

Best Regards,

Victor 

[Durga Gopalakrishnan]

Victor,

We have ensured the chart animation in MAUI Blazor Application; scrolling is performed smoothly as per behavior. We have attached the tested sample and video for your reference.

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

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Maui124564004.zip

Please let us know if you have any concerns.

[Victor]

Hello,

Attached you can find the file which is a recording of the project you 've attached above. It displays the faulty scrolling without proper animation and transition.

Consider a proper and smooth scrolling the scrolling that is applied to Syncfusion Grids, as this one: 

https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5

Thank you for the detailed investigation of the issue.

Victor

Attachment: Scrolling_8fdf39f6.zip

[Swetha Babu]

Victor,

We have considered the reported scenario as an improvement and created a feature request for the same. This improvement will be included in our 2023 Volume 2 release which is expected to be rolled out at the end of June 2023. Please find the below feedback link to keep track of the reported scenario.

Feedback link: https://www.syncfusion.com/feedback/42000/support-for-smooth-scrolling-in-lazy-loading-chart

Kindly, revert us if you have any concerns.

[Durga Gopalakrishnan]

Victor,

We have fixed the reported issue and it will be available in our upcoming weekly patch release which is scheduled to rolled out on 29^th March 2023. We appreciate your patience until then.

Feedback Link : https://www.syncfusion.com/feedback/41867/scrolling-is-not-proper-when-axis-is-inversed-and-dragging-arrows

Please let us know if you have any concerns.

[Durga Gopalakrishnan]

Victor,

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

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

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.

[Gopalakrishnan Veeraraghavan]

Victor,

We are glad to announce that our Essential Studio 2023 Volume 2 Main Release V22.1.34 is rolled out. In this release, we have included support for smooth scrolling in lazy-loading charts and is available for download under the following link.

Essential Studio 2023 Volume 2 Main Release v22.1.34 is available for download | Announcements Forums | Syncfusion

Feedback Link: Support for smooth scrolling in Lazy loading chart in Blazor | Feedback Portal (syncfusion.com)

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

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,

Gopalakrishnan Veeraraghavan