charts what is the best solution to make a real-time chart with PIXI.js ?

[JasonXDDD]

Hi all Expert,

I'm a new one to study PIXI.js. I want to make a smooth real-time line chart, like: ExpertOption: https://app.expertoption.com/

1. need to be smooth and fluently
2. need to use mouse wheel zooming, and scrolling with mouse drag
3. maybe more than 3k data point to showing

 

I thought about manually draw chart by pixi.graphics  and lineTo, but I worry about it is too heavy to render.

I have no idea to draw coordination and chart now. Can someone suggest me a good way to make it? or any pixi plugin or chart libraries to use?

thanks

[ivan.popelyshev]

Zooming and scrolling is possible with https://github.com/davidfig/pixi-viewport

> I have no idea to draw coordination and chart now.

Just code it with PIXI.Graphics, I dont see a problem.

As for plot line, my last plugin, https://github.com/gameofbombs/pixi-candles has Plot class. Build it, host the whole folder with http-server or something, open examples folder. However, its low-level solution for people who already know how to do everything else.

Summary

Making plots in pixijs that are smooth in both performance and quality is possible. But as with any other WebGL-solution, there are many tricks that you have to learn first.

If you say that WebGL is easy stuff, please point me to lib that does it without any problems  

Also if that lib existed, do you think it would be free of charge?

Edited November 22, 2020 by ivan.popelyshev