3D Graph Visualization - Volumetric view

Hello everyone.
I implemented a heat map in node-red using the template node. Each cell has a value and based on that value i have a color. Now for the next step i would like to have a volumetric view. So my initial thought is to turn it into a 3D bar chart, where the height of each bar correspond to the value attributed to each cell. It doesn't need to be exactly a bar chart but it needs to be a 3D representation of the space.
The values must be passed via msg.payload since it comes from a sensor through serial port.
Does anyone knows how to do such 3D representation?

There are many tools to do that. Not sure whether any of the Dashboard extensions will do it though isn't Plotly one of the extensions, I think it can do 3d bars?

Here is my Obsidian document on charting libraries - there will be something in there that you could use though you may need to add the library using a ui_template node (or via uibuilder if you don't need the handholding of other Dashboard features):

My favourites

amCharts :heavy_dollar_sign::heavy_dollar_sign:

Apache ECharts

Website Docs GitHub
Lots of provided example charts. Data streaming, dynamic data. Accessible. Mobile-friendly. Many types including gauges, calendars, 3d
Negatives: Have to load lots of library files or the full library.
Positives: Free.


Website Docs GitHub
Native support for VueJS. SVG based.
Wrappers for Vue, REACT, Angular.
Responsive queries available, interactive
Negatives: Missing information from many examples (too many assumptions), behaves poorly with custom CSS and does not adapt to light/dark browser settings. Data structures too complex - causes reactivity issues that have to be worked around in VueJS. Text is not adaptive to sizing.
Positives: Free.


Website Docs GitHub
Lots of example charts. D3-based, 21 chart types


Pure HTML, have to define colours yourself.


[website](Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API (canvasjs.com))
30+ chart types that are rendered in HTML divs rather than a canvas. Templates for many frameworks. Interactivity. High performance.


Website Docs GitHub
Good for simple requirements. Has simple data structure.


Although the animation effects are unique, working with this library may be tricky for beginners. Small: 60kb


C3.js | D3-based reusable chart library (c3js.org)

D3-based reusable chart library


Website Docs GitHub
Data visualisation rather than pure charting


Dygraphs — main page
Timeseries plotter for very large datasets.


Echarts on GitHub
Echarts examples
Good with big datasets


HumbleSoftware/Flotr2: Graphs and Charts for Canvas in JavaScript. (github.com) humble software development - flotr2
Types: lines, bars, candles, pies, bubbles


Website Docs GitHub
Simple, SVG based.

FusionCharts :heavy_dollar_sign::heavy_dollar_sign::heavy_dollar_sign:

[website](JavaScript charts for web & mobile | FusionCharts)


Website Docs GitHub
"Visualization Grammar". Part of AntV
Chinese documentation.

Google Charts

Lots of options but overly complex.
Google Charts website
Google Charts gallery

HighCharts :heavy_dollar_sign::heavy_dollar_sign::heavy_dollar_sign:



Dynamic math plots


jqPlot Charts and Graphs for jQuery
Mature library with good docs. Includes usual types plus gauges.

Lightweight Charts

Website Docs GitHub
Specifically designed for finance. Streaming & large dataset support.


Website Docs GitHub
Finance, eCommerce, data grids, segmentation. Used in lots of COVID, and Olympics charts. Also available for Python. Uses custom web elements.


Website Docs GitHub


RGraph: Beautiful JavaScript charts for websites

is a JavaScript library that makes fast, functional and pretty web-based charts


Rickshaw: A JavaScript toolkit for creating interactive time-series graphs (shutterstock.com)

Toast UI Chart

Website Docs GitHub
Bars, columns, lines, areas, bubbles, treemaps, radars, radial bars, and others.

uPlot (AKA ÎĽPlot)

:chart_with_upwards_trend: A small, fast chart for time series, lines, areas, ohlc & bars
leeoniya/uPlot: :chart_with_upwards_trend: A small, fast chart for time series, lines, areas, ohlc & bars (github.com)
Very fast, especially for time series. Small library.

Vega - Vega Lite

A Visualization Grammar | Vega

Vis.js (Community Edition)

vis.js (visjs.org)

A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.

ZoomCharts :heavy_dollar_sign::heavy_dollar_sign::heavy_dollar_sign:



Thank you for your reply!
I tried Plotty but the 3D bar chart didn't work. I then tried a surface graph but i am having a problem passing the values through the msg.payload (implemented in the ). Right now is only working with a static array. I read in some forums that i should try angular but it wasn't very clear how to implement and i never used angular, so i was trying to find an alternative.
I am going to look to all of those links you sent. Thank you.

If you don't need the support of Dashboard (which uses a very old version of AngularJS v1), you could use uibuilder to simplify things. With uibuilder, you could use any or no framework. It is pretty easy to use a simple uibuilder front-end library function to listen for incoming data updates to update the data for the chart. At this point, Dashboards Angular features only get in the way - unless you are needing Dashboard to do a larger UI.

I rarely ever need 3d charts and would normally "cheat" with Excel. :blush: But with uibuilder, you can often just take an example straight from the website and tweak with the comms from Node-RED via uibuilder.

Happy to try and help if you decide to go that route.

1 Like

Damn this lib is crazy fast. Really nice.
Thanks for listing these.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.