synchronizing across multiple windows with lightweight charts

[peterswanson]

hello, I was directed by those at TV to send this question here. I am using the lightweight charts library to display price and volume synchronized so that you could scale the price and the volume would stay connected on the time axis. Also it would be great to get the cursor to line up on both charts at the same time like it happens in TV

The issue is that when I create separate charts using the library, neither of these functionalities occurs (understandably) and so I was hoping that you might know of a way to get this working? here is how it looks now when you scale the price chart:

(note the charts on the Y-axis aren't synchronized and the crosshair isn't showing on the volume chart. )

[SlicedSilver]

We have an example showing how to configure the chart to display both the price and volume on a single chart here: https://tradingview.github.io/lightweight-charts/tutorials/how_to/price-and-volume

You could also display the volume on a separate price scale like this: https://tradingview.github.io/lightweight-charts/tutorials/how_to/two-price-scales

I can understand that the examples may not entirely meet your requirements. For your specific question, there isn't a way to 'link' two separate charts together at the moment.

You can however achieve something very similar with quite a bit of extra code. You can use the crosshairMove event to know where the cursor is within one of the charts and then determine the matching data point in the second chart and display a Priceline (https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#createpriceline). That would handle getting a horizontal 'crosshair' on both charts. To get the vertical crosshair, I would suggest hiding the crosshair on the charts (https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CrosshairOptions) and then using a transparent canvas element placed on top of the charts (or below if the charts have a transparent background), and then draw your own vertical crosshair.

To assist with getting the charts to have similar price scale widths you could look at these tips: https://stackoverflow.com/questions/71901106/a-way-to-set-pricescale-width-in-lightweight-charts/73209722#73209722

You would also want to 'sync' the time scales on the two charts by using subscribeVisibleLogicalRangeChange on the charts and update the logical range on the other chart with setVisibleLogicalRange

[SlicedSilver]

The new setCrosshairPosition API could be used to synchronise multiple charts when used in combination with the visibleRange subscribers and setters. Additionally if you need to ensure that the price scales are the same width then you could use the minimumWidth option on the Price scale options.

https://tradingview.github.io/lightweight-charts/tutorials/how_to/set-crosshair-position