# Sankey chart in node-red

**URL:** https://discourse.nodered.org/t/sankey-chart-in-node-red/48385
**Category:** Dashboard
**Created:** [14 July 2021 05:38 UTC](https://discourse.nodered.org/t/sankey-chart-in-node-red/48385 "2021-07-14T05:38:56Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![muhammad\_mikail\_j](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@muhammad\_mikail\_j](https://discourse.nodered.org/u/muhammad_mikail_j)
#### Post date: [14 July 2021 05:38 UTC](https://discourse.nodered.org/t/sankey-chart-in-node-red/48385/1 "2021-07-14T05:38:56Z")

</div>

Dear All,

Hope you are doing well 🙂  
Anybody have reference for creating Sankey chart in node-red ?  
or maybe there are some tutorial for different type of chart visualization in node-red.

Thank you

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [14 July 2021 06:38 UTC](https://discourse.nodered.org/t/sankey-chart-in-node-red/48385/2 "2021-07-14T06:38:21Z")

</div>

Advanced charts can be made using external charting libraries, for Sankey may be the Plotly is reasonable choice. [Sankey Diagrams | JavaScript | Plotly](https://plotly.com/javascript/sankey-diagram/)

Here's the basics how it can be done using the` ui_template` node.

```auto
[{"id":"60fc1dbf.2e7ea4","type":"ui_template","z":"407e1abc.6d1cb4","group":"65dfd687.bc39a8","name":"sankey example","order":9,"width":"15","height":"11","format":"<style>\n#plot{\n display: flex;\n justify-content: center;\n}\n</style>\n\n<div id=\"plot\"></div>\n\n<script>\nsetTimeout(function(){ \n d3.json('https://raw.githubusercontent.com/plotly/plotly.js/master/test/image/mocks/sankey_energy_dark.json', function(fig){\n\n var data = {\n type: \"sankey\",\n domain: {\n x: [0,1],\n y: [0,1]\n },\n orientation: \"h\",\n valueformat: \".0f\",\n valuesuffix: \"TWh\",\n node: {\n pad: 15,\n thickness: 15,\n line: {\n color: \"black\",\n width: 0.5\n },\n label: fig.data[0].node.label,\n color: fig.data[0].node.color\n },\n link: {\n source: fig.data[0].link.source,\n target: fig.data[0].link.target,\n value: fig.data[0].link.value,\n label: fig.data[0].link.label\n }\n }\n \n var data = [data]\n \n var layout = {\n title: \"Energy forecast for 2050\",\n width: 780,\n height: 580,\n font: {\n size: 10,\n color: 'white'\n },\n plot_bgcolor: 'black',\n paper_bgcolor: 'black'\n }\n \n Plotly.newPlot('plot', data, layout)\n });\n}, 300);\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":300,"y":180,"wires":[[]]},{"id":"d6182ec3.536c","type":"ui_template","z":"407e1abc.6d1cb4","group":"65dfd687.bc39a8","name":"load plotly","order":10,"width":0,"height":0,"format":"<script src=\"https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly.min.js\" integrity=\"sha512-V0j9LhrK9IMNdFYZqh+IqU4cjo7wdxyHNyH+L0td4HryBuZ7Oq6QxP2/CWr6TituX31+gv5PnolvERuTbz8UNA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":290,"y":140,"wires":[[]]},{"id":"65dfd687.bc39a8","type":"ui_group","name":"Default","tab":"5394d338.3dd19c","order":1,"disp":true,"width":"15","collapse":false},{"id":"5394d338.3dd19c","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [14 July 2021 08:19 UTC](https://discourse.nodered.org/t/sankey-chart-in-node-red/48385/3 "2021-07-14T08:19:04Z")

</div>

It will probably be possible using [node-red-node-ui-vega (node) - Node-RED](https://flows.nodered.org/node/node-red-node-ui-vega) - Vega supports lots of different graph types.

Unfortunately I can't give you a working example.

Although this example shows a Sankey graph generated in vega - so you may be able to piece together what's needed... [Sankey diagram with vega.js - bl.ocks.org](https://bl.ocks.org/XavierGimenez/82ed6db55ade843c51ee062852b5313e)

---

<div class="post-metadata">

### Author: ![muhammad\_mikail\_j](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@muhammad\_mikail\_j](https://discourse.nodered.org/u/muhammad_mikail_j)
#### Post date: [19 July 2021 02:48 UTC](https://discourse.nodered.org/t/sankey-chart-in-node-red/48385/4 "2021-07-19T02:48:03Z")

</div>

Thank you @knolleary and @hotNipi for your reference, I will explore and test it first.

Will be back after get result.

Appreciate your support

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [18 August 2021 02:48 UTC](https://discourse.nodered.org/t/sankey-chart-in-node-red/48385/5 "2021-08-18T02:48:59Z")

</div>

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