lightweight-charts
lightweight-charts copied to clipboard
tradingview
Getting an access to canvas context
Is it possible now to get an access to canvas context for drawing anything we want right on the canvas? Thus we can draw any custom graphics on a plot such as lines, text labels, free hand notes, etc. What do you think guys?
Is it possible now to get an access to canvas context for drawing anything we want right on the canvas?
It's impossible right now.
What do you think guys?
It's tricky question. Right now we have some optimisations internally, which allows us make charts performant. For instance, we have 2 canvases for every pane/price axis/time axis instead of just 1 or even the only 1 for the whole chart. Which one we should provide you? When (before our own renderers or after, or maybe between)? What's about pixel perfect (who should scale context and what if you want to use "native" context instead of scaled one)? What if you'll renderer out of "draw cycle" (requestAnimationFrame)? I guess there are a ton other questions we need to answer before start doing this.
But anyway, we keep in mind that it'd be better to provide such kind of API so users will be able to draw their own data as they wish.
Agree, lots of tricky questions. I found a workaround to solve my problem, so no need to get canvas context now.
I think this a key feature to enable advanced developers to fully leverage this library. In particular, I'm thinking about free drawing (trend lines etc). Any plans to support this?
It might be a good idea to have callbacks like before/afterDrawTimeSeries. These are called by the library for every point that is drawn and provides the canvas context. Then we could draw additional things at/around each point for each time serie.
@mqklin what was your problem? Would you know how to draw a rectange on the canvas?
@asedsami i'm using built-in figures instead https://github.com/tradingview/lightweight-charts/blob/master/docs/series-basics.md#setmarkers
What's about pixel perfect (who should scale context and what if you want to use "native" context instead of scaled one)?
Does full access to the context have to be given? how about accessing the context without being able to scale?
Isn't there any third-party fork that supports this? Too bad it hasn't been supported yet after almost 2 years
@jonas-db well, do you have the understanding how it could be done from API prospective? Keep in mind that we have 2 canvases for each type of chart item (2 for each pane, 2 for time axis, 2 for each price axis).
@timocov Unfortunately, I'm not familiar with the internals. I don't mind having a look at them if you have some clear pointers on where to look. While I can understand having two canvasses for performance reasons (I assume to have some sort of offscreen buffer?), the developer shouldn't have to worry about it from an API perspective.
I think a first step would be to make the canvasses accessible and have several hooks (eg before/afterDrawPriceBar) to have the drawing behind or in front of the price bar). Each of these hooks are called for with 4 coordinates (eg OHCL) of the pricebar on the canvass. So these coordinates can be used directly without the developer having to translate or scale them.
I think most of the drawing would be relative to some price bar anyways (eg a trendline from x1,y1 (eg close of bar1) to x2,y2 (eg close of bar 2)... I believe this seems a fair assumption and shouldn't make things too complex.
What do you think?
the developer shouldn't have to worry about it from an API perspective.
But you're complaining that "not having this feature for more that 2 years is bad". We don't have this feature for some reasons (one of them is complexity and unobviousness of the solution, the second one if the priority) and if you know how to solve them - please feel free to share your thoughts with the community. This is an open-source, isn't it? 🙂
Each of these hooks are called for with 4 coordinates (eg OHCL) of the pricebar on the canvass
Unfortunately it doesn't work like that and if you want to have good performance your code will be optimized and most likely you won't be able to provide such "hooks".
What I was thinking of is written here https://github.com/tradingview/lightweight-charts/issues/408#issuecomment-617050522.
Is it possible now to get an access to canvas context for drawing anything we want right on the canvas?
It's impossible right now.
What do you think guys?
It's tricky question. Right now we have some optimisations internally, which allows us make charts performant. For instance, we have 2 canvases for every pane/price axis/time axis instead of just 1 or even the only 1 for the whole chart. Which one we should provide you? When (before our own renderers or after, or maybe between)? What's about pixel perfect (who should scale context and what if you want to use "native" context instead of scaled one)? What if you'll renderer out of "draw cycle" (requestAnimationFrame)? I guess there are a ton other questions we need to answer before start doing this.
But anyway, we keep in mind that it'd be better to provide such kind of API so users will be able to draw their own data as they wish.
is it possible now ?
We recently introduced the ability to write plugins for Lightweight Charts, allowing users like you to extend the functionality of the library without adding it to the core. These plugins have the ability to draw using canvas APIs.
To get started with plugins, please refer to our Plugins Documentation for a better understanding of what is possible and how plugins work. You can also explore our collection of plugin examples (with a preview hosted here) for inspiration and guidance on implementing specific functionality.
To help you get started quickly, we have created an NPM package called create-lwc-plugin, which sets up a plugin project for you. This way, you can hit the ground running with your plugin development.
If you do create a plugin based on your feature request, we would appreciate it if you could publish it on GitHub or NPM and let us know. This way, we can share it with the rest of the community. It would be helpful if you could prefix your NPM package name with lwc-plugin- for easier discoverability by others.
