Chart dom element container
matthewwwz opened this issue · comments
Hi! How to get a reference to a DOM element container when creating a Chart?
bind:this on a component won't work..the only way to use is via use.
The second question, I understand that it’s off topic, how to insert early historical data when the chart is shifted to the left?
Hi! How to get a reference to a DOM element container when creating a Chart?
bind:this on a component won't work..the only way to use is via use.
Currently it is not available. Please describe your goal, why do you want to get this reference? You can find a workaround by using ref to a parent element and getting it's first child element. I will consider adding this feature in the next release.
The second question, I understand that it’s off topic, how to insert early historical data when the chart is shifted to the left?
I'll write an example. To clarify, do you want to lazy load historical data when the user scrolls the chart to the left?
- For example, getting a goal to hang up resizeObserver to change the width and height of the container
- Yes, lazy loading, can't find it in the lightweight API. The plans are to lazily load historical data from the backend every time the chart shifts to the left
1. For example, getting a goal to hang up resizeObserver to change the width and height of the container
Got it. It makes sense to add this feature (ref to a dom node) and I think propagating the remaining attributes from the Chart component to the dom container can be useful. In this case, you can specify a CSS class or a dom container ID (or any other attr).
2. Yes, lazy loading, can't find it in the lightweight API. The plans are to lazily load historical data from the backend every time the chart shifts to the left
I'll find an example or write it myself when I have time.
I'll find an example or write it myself when I have time.
Thank you, I'm waiting
I've published a new version with dom reference. Example: https://svelte.dev/repl/22c14c4729d44d65a69346d1e3cc6e89
I'm working on example with lazy loading.
Wow, so fast, thanks!
Okay, I'm waiting for an example with lazy loading.
Found in API - https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi#barsinlogicalrange
I think this is it.
Based on "Infinite history" example from https://www.tradingview.com/lightweight-charts/:
Man, that's cool, thanks a lot for the example, you're the best!
I'm working on a <TimeScale> component to reduce the amount of code needed to handle the infinite history case.
<TimeScale
ref={console.log}
on:visibleTimeRangeChange={console.log}
on:visibleLogicalRangeChange={console.log}
on:sizeChange={console.log}
/>