Jump to content

Charts with Pixi.js


Recommended Posts



I'm in the data visualization field and I'm trying to see if I can leverage Pixi.js to create various charts that I've typically be created with SVG. 

Right now, I'm trying to create a bar chart with position and height changes as the data updates. I've been creating one PIXI.Graphics per bar and I'm updating the graphics width, height, and y positions when the data changes.


// This runs ones per bar

var rect = new PIXI.Graphics();

rect.drawRect(0, y, width, height);
// When updating bars
rect.drawRect(0, y, width, height);
My questions are:
1. If I'm planning to draw hundreds of bars, is Graphics the right object to use?
2. Can I use sprites if I'm going to have different fills, width, and heights for each bar?
I'm very new to PIXI, so I'm still trying to learn the API and figure what's the right set of objects to use for the job.


Link to comment
Share on other sites

  • 2 weeks later...

For convenience reasons I would use a smal white texture on a sprite.

Then just set the width/height of that sprite and tint it in the color you want to use.

An Graphics objects is dead slow.

Thanks Sebastian, that makes sense. Any idea if I can apply the same concept but to circles, where I need to change the radius of the circle instead of the width/height? Not sure how to do that with Sprites.

Link to comment
Share on other sites

  • 2 years later...

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...