Jump to content

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

Link to comment
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 :(

Link to comment
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:

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...