BarChart Scrollbar Questions

[Keith Rosenbauer]

Ultimately trying to control the height of a bar chart, so that scrolling is enabled when there are a large number of results returned (example below)

For clarity, what I'd like to to be rendered here when opening the chart is say 6-8 of the categories, and then as a user scrolls the other categories are revealed, but the range of the X-axis adjusts accordingly.  I do not want the user to have to select to zoom or click to Zoom, but rather just automatically have this render upon page load.

Also, is it possible that the scrollbar be on the right side of the container (not the left as it's shown here)?

I've attached the code of this demo component here for reference - I've tried a number of things based on reading the docs, but it's not clear to me on how I can accomplish what I'm looking to do.  Thanks!

Attachment: DEMOSalesByProductCategoryBarChart.tsx_eeeb341b.zip

[Keith Rosenbauer]

And just for clarity, attached a GIF in the Zip file for what I'm looking for (if my explanation isn't clear).  Thanks

Attachment: 20241017_171037.gif_2b0eeeef.zip

[Nishanthi Panner Selvam]

Hi Keith Rosenbauer,

Greetings from Syncfusion.

Query1: Opening the chart is say 6-8 of the categories, and then as a user scrolls the other categories are revealed

We have analyzed your query, based on that we suggest you to use lazy loading based on points Length concept.

Initially, you can load a set number of data points (for example, 5) using the getNumericData function. As the user scrolls, the remaining data will be loaded into the chart based on the range in scrollEnd event. This approach will dynamically adjust the chart height according to the number of points being displayed.

We have attached code-snippet, sample and screenshot for your reference.

Code-snippet:

<ChartComponent

primaryXAxis={{

            title: 'Day',

            valueType: 'Category',

            scrollbarSettings: {

                enable: true,

                pointsLength: 30

            }

        }}>

     <SeriesCollectionDirective>

              <SeriesDirective dataSource={GetNumericData(0, 5)}>

              </SeriesDirective>

     </SeriesCollectionDirective>

</ChartComponent>

    function scrollEnd(args) {

            chart.series[0].dataSource = GetNumericData(args.currentRange.minimum, args.currentRange.maximum);

            chart.dataBind();

    }

    function GetNumericData(start, end) {

        let series1 = [];

              for (let i= start; i < end ; i++) {

                let point = { x: staticData[i].x, y: staticData[i].y };

                series1.push(point);

              }

        return series1;

      }

GIF:

Sample: https://stackblitz.com/edit/react-aubhtv-avnmvt?file=index.js

Query2: Is it possible that the scrollbar be on the right side of the container (not the left as it's shown here).

We are currently working on this feature, and it will be included in the Volume 4 release which is expected to be rolled out at end of December 2024. We will notify you once it has been included.

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Keith Rosenbauer]

Thanks this is helpful, but I have some follow-up questions.

In your example data, there is a Category30 that doesn't render on the graph (just 1-29 render).  I'm confused why that is - can you explain this?  Want to ensure that ALL data passed in is rendered.

Secondarily, when loading the chart, it starts with the Scroll bar pinned at the bottom and you have to scroll up.  Can we start at the "top" to scroll down.

[Keith Rosenbauer]

Added some images to support my secondary ask in the zip file.  Thanks!

Attachment: Example.pdf_712e157a.zip

[Keith Rosenbauer]

One last question, on a Mac w/ a Magic Mouse, the scroll bar responds to scrolling, but it is not refreshing the chart (have to click and drag the scroll bar).  Is there a listener required for the touch scroll on the scroll bar?  

[Keith Rosenbauer]

I figured out my first question (In your example data, there is a Category30 that doesn't render on the graph (just 1-29 render).  I'm confused why that is - can you explain this?  Want to ensure that ALL data passed in is rendered.) - this is defined by the pointsLength - so I'm good there.

Still looking for guidance on the starting the scroll bar at the top (highest to lowest like in my image above) so that a user has to scroll down to reveal categories with lowest sales.

This example does show a horizontal scroll starting at the left, which is I feel how I need to do this for the vertical scroll, but unclear how to accomplish this.

https://ej2.syncfusion.com/react/demos/?_gl=1*1kx44b9*_ga*MjA5OTY1ODY0Ny4xNzI1ODg3NDE4*_ga_41J4HFMX1J*MTcyOTc2OTc1MS4yNi4xLjE3Mjk3NzAwNDguMC4wLjA.#/fluent2/chart/lazy-loading

[Nishanthi Panner Selvam]

Hi Keith,

Query1: When loading the chart, it starts with the Scroll bar pinned at the bottom and you have to scroll up.  Can we start at the "top" to scroll down.

To place the scroll bar at the top, we recommend setting the isInversed property to true in the primaryXAxis.

We have attached code-snippet, sample and screenshot for your reference.

<ChartComponent

            id="charts"

            primaryXAxis={{

              title: 'Day',

              valueType: 'Category',

              isInversed: true,

              scrollbarSettings: {

                enable: true,

                pointsLength: 30,

       },

    }}

>          

</ChartComponent>

Screenshot:

Sample: https://stackblitz.com/edit/react-aubhtv-tep6z3?file=index.js

Query2: Mac w/ a Magic Mouse, the scroll bar responds to scrolling, but it is not refreshing the chart (have to click and drag the scroll bar).

We are analyzing your reported scenario. We will update the status within two business days. We appreciate your patience until then.

Regards,

Nishanthi

[Keith Rosenbauer]

Thank you, the isInversed is what I was looking for.  And appreciate you looking into the Magic Mouse touch scrolling.  There is some very odd behavior now with after adding the isInversed (as if it's attempting to scroll, but just flickers).  I added a recording of this

Attachment: 20241024_085458.mp4_abe7012d.zip

[Nishanthi Panner Selvam]

Hi Keith,

We have analyzed the reported issue by scrolling the scrollbar with the isInversed enabled on the axis. The chart loaded without any flickering. For your reference, we have attached a sample GIF demonstrating this behavior.

GIF:

Sample: https://stackblitz.com/edit/react-aubhtv-uxifm9?file=index.js

Since we are unable to replicate an issue from our end, we request you to share the following information which will be helpful for further analysis and provide you the solution sooner.

• Try to reproduce the reported scenario in above sample.
• Please share your sample.
• Did you experience this issue with Magic Mouse touch scrolling on your Mac?

Regards,

Nishanthi

[Keith Rosenbauer]

The flickering that I sent only occurs with the Magic Mouse touch scrolling - not the drag and scroll as your GIF is demonstrating.  I just updated to v. 27.x (was on 26.x) and I still see this behavior with the Magic Mouse touch scrolling

[Nishanthi Panner Selvam]

Hi Keith,

Apologies for the delayed response. We are checking the reported scenario with high priority and update the status within two business days.

Regards,

Nishanthi

[Nishanthi Panner Selvam]

Hi Keith,

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 January 7, 2025. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback: https://www.syncfusion.com/feedback/64145/scroll-is-not-working-with-the-magic-mouse-in-the-chart

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,

Nishanthi