Hello everyone,
I’m currently working on an Angular application that utilizes Plotly.js for rendering interactive graphs, with Django serving as the backend. I’ve encountered a peculiar issue where, after zooming into a specific portion of the graph, if I attempt to use the “autoScale” or “reset Axes” functions, the shaded data regions in the graph unexpectedly shift downwards. This behavior is consistent with the expected outcome, where the shaded regions should remain aligned with the graph’s data points regardless of zoom level or axis adjustments.
Environment:
- Frontend: Angular (version v13.1.4)
- Graphing Library: Plotly.js (version v2.12.0)
- Backend: Django (version v3.2.23)
Issue Description: Upon zooming into the graph and either clicking on “autoScale” or “reset Axes,” the shaded areas that represent curtailment or the yellow regions shift downwards, away from their original positions relative to the data points. This shift only occurs after zooming and applying the mentioned actions; the initial render of the graph does not exhibit this issue.
Steps to Reproduce:
- Render the Plotly graph with shaded regions/data points.
- Zoom into a specific area of the graph.
- Click on “autoScale” or “reset Axes.”
- Observe that the shaded data regions shift downwards.
Attempted Solutions:
- I’ve tried manually trying to override the function for autoScale and reset Axes and was not able to.
- Ensuring that the data being passed to the graph is consistent before and after the zoom/reset actions.
- Updating the version of my plotly.
I’m seeking insights into why this behavior might be occurring and how to resolve it. Is this a known issue with Plotly graphs in Angular applications, or could it be related to how the graph’s data or options are being updated in response to user interactions? Any advice on troubleshooting steps or potential solutions would be greatly appreciated.
Here are the attached before and after zooming pictures:
