# Looking for a chart diagram

**URL:** <https://forum.babylonjs.com/t/looking-for-a-chart-diagram/48554>\
**Category:** Questions\
**Created:** [March 6, 2024, 7:08am UTC](https://forum.babylonjs.com/t/looking-for-a-chart-diagram/48554 "2024-03-06T07:08:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [March 6, 2024, 7:08am UTC](https://forum.babylonjs.com/t/looking-for-a-chart-diagram/48554/1 "2024-03-06T07:08:48Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/a/fa04ba76729c8c7482d0430cc55856410adbaeb5.jpeg)

Is there a function for?

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [March 6, 2024, 7:48am UTC](https://forum.babylonjs.com/t/looking-for-a-chart-diagram/48554/2 "2024-03-06T07:48:33Z")

</div>

ok, I found some examples

[3D scatterPlot | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#E3XJMU#20)

[Candy pie: a configurable, interactive 3d pie chart in your browser - Demos and projects - Babylon.js (babylonjs.com)](https://forum.babylonjs.com/t/candy-pie-a-configurable-interactive-3d-pie-chart-in-your-browser/32803)

[Bjorn’s Fancy Charts (backlund.org)](https://www.backlund.org/app.aspx?about=FancyCharts3D)

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

---

<div class="post-metadata">

**Author:** ![thierry](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/thierry/32/18896_2.png) [@thierry](https://forum.babylonjs.com/u/thierry)\
**Post date:** [March 6, 2024, 9:35am UTC](https://forum.babylonjs.com/t/looking-for-a-chart-diagram/48554/3 "2024-03-06T09:35:32Z")

</div>

Hello,

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](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](https://www.opayra.com/#candy-bar)

Hope it gives some inspiration.

---

<div class="post-metadata">

**Author:** ![dsaffo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dsaffo/32/31907_2.png) [@dsaffo](https://forum.babylonjs.com/u/dsaffo)\
**Post date:** [March 6, 2024, 12:45pm UTC](https://forum.babylonjs.com/t/looking-for-a-chart-diagram/48554/6 "2024-03-06T12:45:35Z")

</div>

I have been working on a toolkit for data visualization with Babylon called [Anu.js](https://jpmorganchase.github.io/anu/) 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.

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [March 6, 2024, 1:16pm UTC](https://forum.babylonjs.com/t/looking-for-a-chart-diagram/48554/7 "2024-03-06T13:16:29Z")

</div>

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

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

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/9/89e1e18f55a09f9497504613bb635609aa7e0d96.png)

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [March 6, 2024, 1:32pm UTC](https://forum.babylonjs.com/t/looking-for-a-chart-diagram/48554/8 "2024-03-06T13:32:17Z")

</div>

Very nice syntax, dsaffo! 🙂

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

---

<div class="post-metadata">

**Author:** ![dsaffo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dsaffo/32/31907_2.png) [@dsaffo](https://forum.babylonjs.com/u/dsaffo)\
**Post date:** [March 6, 2024, 2:02pm UTC](https://forum.babylonjs.com/t/looking-for-a-chart-diagram/48554/9 "2024-03-06T14:02:47Z")

</div>

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
