Looking for a chart diagram

Maybe this will be my first professional task with babylon.js to show some stats with a balk diagram?


Is there a function for?

ok, I found some examples

3D scatterPlot | Babylon.js Playground (babylonjs-playground.com)

Candy pie: a configurable, interactive 3d pie chart in your browser - Demos and projects - Babylon.js (babylonjs.com)

Bjorn’s Fancy Charts (backlund.org)

but I need a block chard. I’m going to create one on my self…


I found back a post about a 3d bar chart I did a good while ago : https://forum.babylonjs.com/t/candy-bar-a-multi-categorical-stacked-bar-chart/23957

Code can be found at https://www.opayra.com/#candy-bar

Hope it gives some inspiration.

1 Like

I have been working on a toolkit for data visualization with Babylon called Anu.js that will hopefully help you with just that : )

There isn’t a function that will just make charts for you rather a API that helps you manipulate meshes with data and helper methods to build axes, color scales, maps, interactions, etc. Very D3.js style in that way.

If you want a particular visualization example added to the gallery let me know and I can give it a try.

1 Like

Thanks a lot, dsaffo. Your tool looks very promissing! :slight_smile:

I have another question. If I embed my scene into our framework I get a low resolution output. What could be the reason for?


Very nice syntax, dsaffo! :slight_smile:

I don’t need just-in-time updates yet, but can your plugin do that?

1 Like

For the resolution issue, it could be the canvas size being messed up, you can try engine.resize() after the scene is rendered to see if that fixes it.

As for just-in-time updates, yes but you have to code the render loop logic. The core part of the toolkit is just an api for updating the scene graph via the selection class and methods. So at any point in your application, you can modify the contents and properties of meshes in a selection after its created using bind or bindInstance or after a scene graph selection with selectName etc.

You could do this on every frame with scene.registerBeforeRender() or more likely listening to an update event/observer from your application and calling the visualization code.

If you have any Anu-specific questions feel free to ask on the GitHub discussion page

1 Like