Looking to try and “link” two timeseries charts when either one is zoomed. The link aspect would be updating the other chart to have the same visible range as the zoomed chart.
Each chart has its visibleRange property updated in response to separate socket events, that happen at similar intervals but different.
Originally, was hoping to have something similar to the onZoomExtents method that fires a callback that would allow me to grab the latest min/max of the visibleRangeProperty of the xAxes to then update the other chart.
Any suggestions on how I could go about doing this?
And if it is not clear what I am talking about I can provide some code snippets.
- James Miller asked 3 years ago
-
Hi, James, can this demo code https://demo.scichart.com/javascript-multi-pane-stock-charts be helpful for you? As i can see sc chart devs using xAxis.visibleRangeChanged.subscribe method to synchronize visible ranges. https://github.com/ABTSoftware/SciChart.JS.Examples/blob/3ee3c4f92c3f0f279fe9876aedd9af218948ef70/Examples/src/components/Examples/Charts2D/CreateStockCharts/MultiPaneStockCharts/index.tsx#L294
-
That example was exactly what I needed, thank you sir!
-
Hi James, updated the answer below. Also see this example / tutorial https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2009%20-%20Linking%20Multiple%20Charts.html
- You must login to post comments
Update: This is now a blog post published at How to Link JavaScript
Charts and Synchronise zooming, panning, crosshairs
(Copying an answer from the comment)
These demos should be helpful in this case
JavaScript Multi Pane Stock Charts demo
This demo links multiple charts together. You can find the source code here
Also, we have tutorials on linking multiple charts in the documentation. Please see here:
- Ivan Gasyuk answered 3 years ago
- last edited 11 months ago
- You must login to post comments
Please login first to submit.