-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Multiple panes support #50
Multiple panes support #50
Comments
Do you want to add additional series to the new pane or to existing one? Something like this https://jsfiddle.net/TradingView/srwoh679/? |
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 |
that being said, if i do need to create a new chart, is it possible for me to sync the zooming/paning via events. |
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.
You can use lightweight-charts/src/api/ichart-api.ts Lines 109 to 113 in 8cf07af
lightweight-charts/src/api/itime-scale-api.ts Lines 38 to 42 in 8cf07af
|
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. |
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/. |
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? |
It's not public API and we cannot guarantee you anything in this case. |
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? |
Which one? Supporting multiple panes? |
yes, supporting mutiple panes |
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. |
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. |
oh ok, cool. sounds good. ill keep my eye out for that feature. really appreciate your time |
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 First i added this function public getBarSpacing(): number {
return this._timeScale().barSpacing();
} here and this line getBarSpacing(): number; here 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})
} |
Try this site for an example of a chart that supports multiple synced panes: |
hello, what is the equivalent code for standalone version ? |
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 #50 (comment) but couldn't find the equivalent of this code on the standalone version. |
Is there any update on this feature
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? |
Hi, any update? This way, we could get the time range, and the crosshair coordinates in the main chart, and copy it on the second chart. |
I'm sure no one will argue with that though 🙂
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. |
@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. |
I want to implements like this -> https://jsfiddle.net/adrianntf/6qea5ytv/ this feature when be integrated? |
I want this feature. |
have you update the official code of 'lightweight-charts'? |
Hi guys, You can do something like this, works reasonably well:
|
Hi! setTimeout(() => {
}, 1000); |
I see that the last two code share are running well enough. I could not manage to show tooltips for chart2 yet but I think it would be possible. Thanks. |
This works pretty well but when zoomed in the charts weren't being synced as seamlessly as I wished. Using Here is the code If someone needs it: chart1.timeScale().subscribeVisibleLogicalRangeChange(range => {
chart2.timeScale().setVisibleLogicalRange(range);
});
chart2.timeScale().subscribeVisibleLogicalRangeChange(range => {
chart1.timeScale().setVisibleLogicalRange(range);
}); |
I have 2 or more chart and I did this to sync both
But I still want to show the crosshair line in both (chart) at the same time how could I do that? |
//sync crosshair // Define a function to handle visible logical range synchronization const targetChartRefs1 = [chartRef2, chartRef3];
|
Even though the two charts are synchronized, there seems to be an issue with the crosshair. Chart 1 has more data points than Chart 2, but the data points on both charts are similar in terms of timing. Screen.Recording.2023-12-14.at.10.32.03.AM.mp4 |
This is the correct behavior, if you want the crosshair to be horizontally aligned everytime, you need to expand the lower chart so that both charts fill the same space. I think you could use |
Thank you too much!!! |
Here is an updated fork of @ntf / @john-wallace-dev forks that people can reference if they'd like: https://github.com/rwitzlib/lightweight-charts |
Here is an example of using this library. For these examples, assume Adding a pane: Removing a pane: |
Can you provide a dist standalone production version e.g. on UNPKG or as Github Release Asset? |
|
Thanks for the improved charts with pane |
Hi rwitzlib, I have a basicquestion: how to use your code in file with extention .html? |
Hey @rwitzlib, I tried to install the fork by adding it to my package.json as follows and did npm install. I get the following error
I have then set the PUPPETEER_SKIP_DOWNLOAD to true and I then get another error as follows :
I then set the PUPPETEER_SKIP_DOWNLOAD to false and tried Correction, with --ignore-scripts all the scripts are ignored and it makes sense that the dist is not present after install.
This installs the package but without the /dist folder in the node modules. Performing the same operation with john-wallace-dev's fork works as expected I wanted to know what could be going wrong here? Any help is appreciated. |
|
@rwitzlib were you able to fix this crosshair syncing issue (when scrolling either of the charts) with your implementation? This is demonstrated on the example chart in the trading view chart tutorials Screen.Recording.2024-05-30.at.12.05.26.mov |
charts.forEach(({ chart }, index) => {
if (index < charts.length - 1) {
chart.timeScale().applyOptions({
visible: false,
});
}
chart.timeScale().subscribeVisibleLogicalRangeChange((timeRange) => {
charts.forEach(({ chart: _chart }, _index) => {
if (timeRange && index !== _index) {
_chart.timeScale().setVisibleLogicalRange(timeRange);
}
});
});
chart.subscribeCrosshairMove(({ time, sourceEvent }) => {
// Don't override crosshair position from scroll event
if (time && !sourceEvent) return;
charts.forEach(({ chart: _chart, seriesList }, _index) => {
const first = seriesList.at(0);
if (first && index !== _index) {
if (time) {
_chart.setCrosshairPosition(NaN, time, first);
} else {
// No time when mouse goes outside the chart
_chart.clearCrosshairPosition();
}
}
});
});
}); |
Yep it's indeed broken ! Something weird is happening in the background |
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.
The text was updated successfully, but these errors were encountered: