pixi.js lineTo drawing is shrinking when a distance between points becomes smaller

Recommended Posts

I'm building line chart using the pixi.js lineTo method. The problem is the lines are shrinking when a distance between points becomes smaller. For testing purpose, I'm trying to draw 200,000 points on that chart.

Drawing function:

   var dataSet = ohlcStore[chartProperty.sym];

     if (dataSet && dataSet.length > 0) {
            var plot = new PIXI.Graphics();

            plot.setTransform(columnSize, (renderer.view.height - rowSize) + (Val_min * yScale), 1, -1 * yScale);

            plot.lineStyle(0.6, chartProperty.lineColor, 1);

            plot.moveTo(0, dataSet[0].close);

            for (i = 1; i < dataSet.length; i++) {
                try {
                    plot.lineTo(i * xScale, dataSet[i].close);
                } catch (x) {
                    console.error("Error - " + x);




Result drawing is attached along with this.

In this case, xScale is 0.006475032375161876 and Using the canvas render gives correct results.

Trying to search for the problem, I've found that the Pixi.js may have an issue with non-integer values. Therefore I've rounded values to integer but the problem didn't solve. Please support to fix this problem.

7-14-2017 5-37-04 PM.png

Share this post

Link to post
Share on other sites

What about native line mode ("new Graphics(true)")?

And yeah, without nativeLine setTransform affects line width and there's no way to evade that, because lines are actually polygons. If you want "setTransform" not affect line width, please use native lines or compute point coords yourself.

https://github.com/pixijs/pixi.js/tree/dev/src/core/graphics/webgl/utils - that's how it actually works. I know that pixi Graphics implementation cant satisfy everyone and there are many things like that. But so far we dont have better implementation :(

Share this post

Link to post
Share on other sites

Thank you very much. after changing to native line mode it's working fine.

And I have another question, I'm going to evolve this basic chart to advance speedy data-loading chart. That's why I've chosen WebGL based pixi.js to build my charting framework. Therefore could I know the charting performance can be impacted by this change as I am a newbie for this PIXI framework. It's great pleasure if you can give a descriptive answer.  :rolleyes:

Share this post

Link to post
Share on other sites

Graphics buffer is re-builded completely on every change: https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/webgl/GraphicsRenderer.js#L123 

Depending on the nature of your changes, it can be made faster, but don't do premature optimizations, first check if its slow.

Simplest optimization is to store a number of Graphics objects, and clear/add lines to only one of them will cost you less. If points are always added to the end or beginning, it will be very easy to optimize it on your side.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.