Multiple panes support

[nothingalike]

Looking through the documentation i dont see anything along these lines. I want to have my main chart but then add some additional data in a separate chart window. I believe some apps call it an Indicator Window. I was curious if its possible with this library.

[timocov]

Do you want to add additional series to the new pane or to existing one? Something like this https://jsfiddle.net/TradingView/srwoh679/?

[nothingalike]

I'm looking more for a new pane. which i assume i can just create another chart option but im afraid that would separate the zooming and paning causing both panes to be out of sync

[nothingalike]

that being said, if i do need to create a new chart, is it possible for me to sync the zooming/paning via events. ex: get event from one chart and apply to the second

[timocov]

If you'll create the new pane, the main one will be synced with that pane by visible range (also different series will share time scale and every series will extend points on time scale).

If you'll create the new chart, then you need to synchronize them yourself, but the charts is independent.

I would say you need to decide what do you want to get 🙂 Also, you can provide screenshots/links to any other platform where you've seen that.

is it possible for me to sync the zooming/paning via events

You can use https://github.com/tradingview/lightweight-charts/blob/8cf07af2223e8010ede7ce844e0b6d81e5da969f/src/api/ichart-api.ts#L109-L113 to get updates of visible time range changes and https://github.com/tradingview/lightweight-charts/blob/8cf07af2223e8010ede7ce844e0b6d81e5da969f/src/api/itime-scale-api.ts#L38-L42 to set visible time range to other chart. Unfortunately we don't have documentation for that methods and we'll add them soon.

[nothingalike]

Ideally i would not like to sync them myself, but it seems that i can take the 'pane' approach and use the itime-scale. that is probably what im looking for.

But for the sake of clarity, here is an image that can help visualize what im asking for. The top being the main pane and the bottom part being the 'indicator' window or pane

[timocov]

Ah, ok, you want to use several panes on the same chart. Currently we haven't API to create additional panes but we've planned to add it in the future. For now you can do something like that https://jsfiddle.net/q3u2khzt/.

[nothingalike]

I see that the chart-model has a createPane method on it, could I just use this? or would i not be able to add a data series to the new pane if i created it this way?

[timocov]

could I just use this?

It's not public API and we cannot guarantee you anything in this case.

[nothingalike]

ah i see, so when adding a series of data via the chart-api it adds this new series to pane[0]. if this particular feature isn't currently being worked on, could i throw a pull request your way in the next few days?

[timocov]

if this particular feature isn't currently being worked on, could i throw a pull request your way in the next few days?

Which one? Supporting multiple panes?

[nothingalike]

yes, supporting mutiple panes

[timocov]

Unfortunately we've started discuss about the design of that feature some time ago and there is some edge cases which requires some detailed investigation. It's one of our "after release features" and we'll add it soon.

[timocov]

I believe that all issues which can be taken by community will be marked with "help wanted" label. But this is a big feature and we need to be very accurate with it, its API and so on.

Thank you for your understanding.

[nothingalike]

oh ok, cool. sounds good. ill keep my eye out for that feature. really appreciate your time

[triorr]

Hello,

In the meantime, waiting for a better feature implementation , I've got some nice result adding some lines to the source code following timocov hint about the subscribeVisibleTimeRangeChange function.

First i added this function

public getBarSpacing(): number {
	return this._timeScale().barSpacing();
}

here https://github.com/tradingview/lightweight-charts/blob/1d26e2d2ab1a936bfa943a48de5f13b673674e7d/src/api/time-scale-api.ts#L31 and this line

getBarSpacing(): number;

here https://github.com/tradingview/lightweight-charts/blob/8cf07af2223e8010ede7ce844e0b6d81e5da969f/src/api/itime-scale-api.ts#L19 and now we can do something like this in our javascript

chart.timeScale().subscribeVisibleTimeRangeChange( syncHandler)
function syncHandler(e) {
    var barSpacing1 = chart.timeScale().getBarSpacing();
    var scrollPosition1 = chart.timeScale().scrollPosition();
    chart2.timeScale().applyOptions({rightOffset: scrollPosition1,barSpacing: barSpacing1})
}

[yuyic]

@triorr @timocov Is there any way to get/set the width of price bar? because the width is dynamic, I want to keep the width of two panels consistent.

[timocov]

@yuyic use barSpacing option https://github.com/tradingview/lightweight-charts/blob/master/docs/customization.md#time-axis.

[michelpmcdonald]

..... Also, you can provide screenshots/links to any other platform where you've seen that.

Try this site for an example of a chart that supports multiple synced panes: www.tradingview.com

[0x48415a484952]

Hello,

In the meantime, waiting for a better feature implementation , I've got some nice result adding some lines to the source code following timocov hint about the subscribeVisibleTimeRangeChange function.

First i added this function

public getbarSpacing(): number {
	return this._timeScale().barSpacing();
}

here

https://github.com/tradingview/lightweight-charts/blob/1d26e2d2ab1a936bfa943a48de5f13b673674e7d/src/api/time-scale-api.ts#L31

and this line

getbarSpacing(): number;

here

https://github.com/tradingview/lightweight-charts/blob/8cf07af2223e8010ede7ce844e0b6d81e5da969f/src/api/itime-scale-api.ts#L19

and now we can do something like this in our javascript

chart.subscribeVisibleTimeRangeChange( syncHandler)
function syncHandler(e) {
    var barSpacing1 = chart.timeScale().getbarSpacing();
    var scrollPosition1 = chart.timeScale().scrollPosition();
    chart2.timeScale().applyOptions({rightOffset: scrollPosition1,barSpacing: barSpacing1})
}

hello, what is the equivalent code for standalone version ?

[0x48415a484952]

this feature is really cool if implemented like we could add an RSI which the range is between 0 and 100 and above that we could have the price candlesticks i tried to create such thing but could not achieve it here are some screen shots that in the second one after plotting RSI on the same chart the price candles get very unclear tried to tweak the scaleMargin but could not achieve a good result also i tried to create this on another chart below this chart which is ok but when the user scrolls the two different charts get out of sync so i think we should be able to plot them on one chart, i tried to look into the source code to add this feature as Triorr mentiond in here https://github.com/tradingview/lightweight-charts/issues/50#issuecomment-504787139 but couldn't find the equivalent of this code on the standalone version.

[karunkrishna]

Unfortunately we've started discuss about the design of that feature some time ago and there is some edge cases which requires some detailed investigation. It's one of our "after release features" and we'll add it soon.

Is there any update on this feature There are are only two ways to render indicators studies;

1. Overlay that use the same values as price (currently achievable)
2. Paneled that use secondary values (Rendered in secondary chart, while time series is linked between charts)

We are missing support for 2.

Is there any documentation/jfiddle examples on using subscribeVisibleTimeRangeChange, getbarSpacing() if the feature will not be available in the near future?

[AurelReb]

Hi, any update? I'm looking exactly for this feature. Multiple panes would be very useful! I also had an idea to handle this: there is an API to get the crosshair coordinates. Is it possible to place the crosshair on custom coordinates when the mouse isn't on the chart?

This way, we could get the time range, and the crosshair coordinates in the main chart, and copy it on the second chart.

[timocov]

Multiple panes would be very useful!

I'm sure no one will argue with that though 🙂

Is it possible to place the crosshair on custom coordinates when the mouse isn't on the chart?

No, we don't have such API for that.

Instead, I'd suggest everyone who needs this, trying to make a proposal for this feature. We'll happy to implement it (almost everything what needed for this feature already is implemented inside the lightweight-charts), but it's hard to provide good, readable and easy understandable API. That's the issue right now. If you have any ideas for that - please write them out here.

[ghost]

@triorr i added 2 charts like you said and they are synced timescale with events. In the top is candlestick and bottom is histogram and my question is how can i make candlesticks and histogram bars stay in the same position? as you can see there is big space between candlesticks but histogram is still same.

@timocov It would be great if you have an idea about that.

[triorr]

@lejyoner-ds Sorry for the late response Let me try and understand what you want. I guess that you have synced both charts to each other and you want to sync them pixel by pixel, is that it? For that, I am sorry I can't help you, as I haven't dug deeper on the code. If you did not sync both charts here is jsfiddle.net demo. https://jsfiddle.net/trior/q3kt6psb/3/ ps: make sure you have the same number of bars and the same dates on both charts.

[quantflares]

Hey guys, sorry if i ask you too, but i would like to use your libraries to reproduce the same chart as in the binance.com, OR tradingview, like in the photo

What I can't find in the documentation is how to create the indicators in the same chart ..

can you build something like > chart.addIndicatorSeres(); ????

so in this way, it could be possible easily to do that.

if you can reply to me I will be grateful,

Thank you

[akamal88]

@timocov is this feature available in latest version ? I mean, having multiple panes like this image

[timocov]

@akamal88 just wonder why you're asking, because this issue even isn't closed... Nope, the feature isn't implemented yet.

[akamal88]

@timocov Thanks, but i asked because i see this property in series class

/** Target price scale to bind new series to */
priceScaleId?: string;

[triorr]

@lejyoner-ds here is an example that use the subscribeCrosshairMove function to get a pixel to pixel sync between the two charts.

https://codepen.io/trior/pen/bGEoqoP

and another one with subscribeVisibleLogicalRangeChange , this one is better I think https://codepen.io/trior/pen/JjGOYNP

@AhmadzadehHazhir My standalone library with the getBarSpacing function is hosted here https://codepen.io/trior/pen/XWXeMqR.js feel free to copy and use it