Page scrolling to the top [0,0] when clearing or adding new series dynamically to a Syncfusion Chart

[James Taylor]

I have a problem when i try to remove the series from an existing Chart in my angular application, and then re add new series dynamically.

When the:

this.myChart.clearSeries()

 is called the web page scrolls back to the top,  Unfortunately, the chart i am manipulating has to be scrolled to in the browser window, so the user needs to re scroll back down the page to view it.

I found that setting the series to an empty array fixed this

this.myChart.series = [];

However, when i use:

this.myChart.addSeries([{...new series data...}]

to add my new series data, it scrolls to the top also.

I am having to save and restore the window scroll position 

window.scrollTo(this.scrollPosition[0] || 0, this.scrollPosition[1] || 0);

after the chart has been "redrawn"

Has anyone else experienced this and have a solution?

For reference, I am using the following module versions

├── @angular-devkit/build-angular@16.2.14

├── @angular/animations@16.2.9

├── @angular/cdk@16.2.8

├── @angular/cli@16.2.6

├── @angular/common@16.2.9

├── @angular/compiler-cli@16.2.9

├── @angular/compiler@16.2.9

├── @angular/core@16.2.9

├── @syncfusion/ej2-angular-buttons@25.2.4

├── @syncfusion/ej2-angular-calendars@25.2.5

├── @syncfusion/ej2-angular-charts@25.2.5

├── @syncfusion/ej2-angular-dropdowns@25.2.5

├── @syncfusion/ej2-angular-grids@25.2.5

├── @syncfusion/ej2-angular-inputs@25.2.5

├── @syncfusion/ej2-angular-layouts@25.2.3

├── @syncfusion/ej2-angular-lists@25.2.3

├── @syncfusion/ej2-angular-navigations@25.2.4

├── @syncfusion/ej2-angular-popups@25.2.4

├── @syncfusion/ej2-material-theme@25.2.5

TIA 

[Swetha Babu]

Hi James,

Greetings from Syncfusion.

We have considered the reported scenario as a bug and logged a defect report for the same. The fix for the reported scenario will be included in our weekly patch release which is expected to be rolled out on June 18, 2024. Please find the below feedback link to keep track of the reported scenario.

Feedback link: https://www.syncfusion.com/feedback/58288/page-scrolls-to-the-top-when-adding-or-removing-series

If you have any more specifications/precise replication procedure to be followed, please add it as a comment in the portal.

[James Taylor]

Swetha,

Thank you for investigating this for me, it was driving me nuts thinking o was doing something wrong.

Regards

James.

[Swetha Babu]

James,

Most Welcome! We will let you know once the fix is available in our weekly patch release.

[James Taylor]

Do we have any update yet on the fix?

[Swetha Babu]

Hi James,

Sorry for the delay.

We have included the fix for the reported scenario- "The page scrolls when adding or removing the series" in our weekly patch release(v26.1.40)

Please find the below stackblitz link for your reference.

https://stackblitz.com/edit/github-zyqcrj-cdpwnp?file=package.json

Please upgrade the ej2-angular-charts package to the latest version to resolve the reported scenario and get back to us if you need any other assistance.

[James Taylor]

Great, Thank you.

I have now updated the references in my project to V26.1.41 ( and raised all other Syncfusion components to V26  )

Regards

James.

[Swetha Babu]

James,

Most Welcome! Please get back to us if you need any other assistance.

[James Taylor]

Hello,

I dont know what has happened with this origional issue, i believed it had been resolved with a previous patch release.

However, I have now upgraded my angular project to use the following modules in version 27

├── @syncfusion/ej2-angular-buttons@27.1.53

├── @syncfusion/ej2-angular-calendars@27.1.55

├── @syncfusion/ej2-angular-charts@27.1.55

├── @syncfusion/ej2-angular-circulargauge@27.1.50

├── @syncfusion/ej2-angular-dropdowns@27.1.55

├── @syncfusion/ej2-angular-grids@27.1.55

├── @syncfusion/ej2-angular-inplace-editor@27.1.50

├── @syncfusion/ej2-angular-inputs@27.1.55

├── @syncfusion/ej2-angular-layouts@27.1.56

├── @syncfusion/ej2-angular-lists@27.1.50

├── @syncfusion/ej2-angular-navigations@27.1.56

├── @syncfusion/ej2-angular-popups@27.1.56

├── @syncfusion/ej2-material-theme@27.1.56

I am still having an issue where the page scrolls up to the top when series are cleared and added to the chart from within the typescript.

I have included a video of this whilst i am debugging, stepping through the code below

// Clear previous series

                        this.myChart.clearSeries()

                        // Add new Series

                        this.dataPoints.forEach((dPoint: AssetDataPoint) => {

                            if (dPoint.ShowOnChart) {

                                // console.log("Dynamic keys for this object:", dPoint.DataPointID);

                                let seriesName = dPoint.SI == '' ? dPoint.DPTitle : `${dPoint.DPTitle} (${dPoint.SI})`

                                this.myChart.addSeries([{

                                    animation: {

                                        enable: false

                                    },

                                    emptyPointSettings: { mode: "Drop" },

                                    type: 'Line',

                                    dataSource: parsedData,

                                    name: seriesName,

                                    xName: 'timestamp',

                                    yName: `[${dPoint.DataPointID}]`,

                                    marker: {

                                        visible: false, width: 8, height: 8,

                                        shape: 'Triangle', dataLabel: { "name": 'x' }, isFilled: true

                                    },

                                    yAxisName: `Axis${dPoint.SI}`

                                }])

                            }

                        });

This is distracting or the user of the site, having to re scroll to the bottom of the page to view the chart.

Is this still a bug, or am i going abut replacing the series in the wrong way?

Regards

Attachment: Chart_Scrolling_4461d9fa.7z

[Nishanthi Panner Selvam]

Hi James,

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

Regards,

Nishanthi

[James Taylor]

Thank you

[Nishanthi Panner Selvam]

James,

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 November 5, 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/62583/page-scrolls-to-the-top-when-clearing-series

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

[Nishanthi Panner Selvam]

Hi James,

Thank you for your patience,

We have included the fix for the reported scenario in our weekly patch release (v 27.1.58) . You can download the latest package from the below link.

Root-cause: The scroll offsetY is not updated with the page scroll, causing issues when removing, adding, or refreshing the chart.

Fix: Now the window.pageYOffset is updated and while refreshing the page will remains on the same pageYOffset value.

Sample: https://stackblitz.com/edit/github-zyqcrj-bzbuxt?file=src%2Fapp.component.ts

Please update the “ej2-angular-charts” package to the latest version in your application to resolve the reported issue. Please find the package from the below links.

Package: https://www.npmjs.com/package/@syncfusion/ej2-angular-charts

Please let us know if you need any further assistance.

Regards,

Nishanthi

[James Taylor]

Nishanthi

We have updated our application to use 

@syncfusion/ej2-angular-charts@27.1.58

I have looked at your sample application and it looks like it has fixed it, However, the issue is still on our application, when we add the new series, it is still jumping the page back to the top.

Is there any way i can give you our application privately to investigate this further?

Regards

James.

[Chrispine Agunja Imbo]

Hi James,

A ticket has been created under your account. Please follow it for further updates.

Regards,

Chris