# Need help with Wordcloud template node in dashboard-2

**URL:** https://discourse.nodered.org/t/need-help-with-wordcloud-template-node-in-dashboard-2/100283
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [30 January 2026 16:14 UTC](https://discourse.nodered.org/t/need-help-with-wordcloud-template-node-in-dashboard-2/100283 "2026-01-30T16:14:30Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)
#### Post date: [30 January 2026 16:14 UTC](https://discourse.nodered.org/t/need-help-with-wordcloud-template-node-in-dashboard-2/100283/1 "2026-01-30T16:14:30Z")

</div>

I have this example code working in dashboard-1....

> [@How to do a Word Cloud](https://discourse.nodered.org/t/how-to-do-a-word-cloud/28213):
>
> Good day, My first post here so please excuse any errors. I have a python word cloud that I developed using Jupyter notebook. It works perfect there. I then want to show this in my node-red dashboard. Whats the best way to do this ? Thank you

(Big thanks to @Steve-Mcl for the clear working example).

I've tried wrapping the code in `<template>` tags as per the example in the template node from Dash-2, but nothing beyond the words "A word cloud for node-red by Steve-Mcl" show up in the new dashboard.

Perhaps the new dashboard is not compatible with the graphics library used in the example?

Thanks for taking a look.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 January 2026 16:48 UTC](https://discourse.nodered.org/t/need-help-with-wordcloud-template-node-in-dashboard-2/100283/2 "2026-01-30T16:48:41Z")

</div>

> [@thebaldgeek](#):
>
> I've tried wrapping the code in `<template>` tags as per the example in the template node from Dash-2, but nothing beyond the words "A word cloud for node-red by Steve-Mcl" show up in the new dashboard.

The old dashboard uses old (depreciated) angular  
New dashboard users Vue

Therefore the scripts in the template wont work

If you see `scope` or `scope.$watch` or similar, then its not just a case of wrapping the HTML in a `template` tag.

![chrome_GEhEiLqi0I](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/fad7b3a325677582d322806f40aa14d452f06dd7.gif)

```flows
[{"id":"163da576e5c69354","type":"ui-template","z":"b6818da1a76c1147","group":"953f3f3b3a6e4b28","page":"","ui":"","name":"","order":1,"width":0,"height":0,"head":"","format":"<template>\n <div class=\"highcharts-figure\">\n <div ref=\"chartContainer\" style=\"width:100%; height:400px;\"></div>\n <p class=\"highcharts-description\">\n A word cloud for Node-RED (Dashboard 2.0)\n </p>\n </div>\n</template>\n\n<script src=\"https://code.highcharts.com/highcharts.js\"></script>\n<script src=\"https://code.highcharts.com/modules/accessibility.js\"></script>\n<script src=\"https://code.highcharts.com/modules/wordcloud.js\"></script>\n<script src=\"https://code.highcharts.com/modules/exporting.js\"></script>\n<script src=\"https://code.highcharts.com/modules/export-data.js\"></script>\n\n<script>\nexport default {\n data() {\n return {\n chart: null\n }\n },\n watch: {\n // Dashboard 2.0 automatically provides 'msg' to the component\n msg: function (newMsg) {\n if (newMsg && !newMsg.clicked) {\n this.updateCloud(newMsg.payload, newMsg.topic);\n }\n }\n },\n mounted() {\n let interval = setInterval(() => {\n if (window.Highcharts) {\n // js is loaded, so we can now use it\n if (this.msg) {\n this.updateCloud(this.msg.payload, this.msg.topic);\n }\n clearInterval(interval);\n }\n }, 200);\n },\n methods: {\n updateCloud(data, topic) {\n if (typeof Highcharts === 'undefined') return;\n\n // Use 'this.$refs.chartContainer' to reference the div\n this.chart = Highcharts.chart(this.$refs.chartContainer, {\n series: [{\n type: 'wordcloud',\n data: data,\n name: 'Occurrences',\n point: {\n events: {\n click: (event) => {\n // In Dashboard 2.0, we use this.send()\n this.send({\n topic: event.point.name,\n payload: event.point.options,\n clicked: true\n });\n }\n }\n }\n }],\n title: {\n text: 'Wordcloud of ' + (topic || 'Data')\n }\n });\n }\n }\n}\n</script>\n\n<style>\n.highcharts-figure {\n margin: 1em auto;\n}\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":540,"wires":[["6fed214e19c630ce","50e8181ad5c43512"]]},{"id":"6453d9def92cc724","type":"ui-button","z":"b6818da1a76c1147","group":"953f3f3b3a6e4b28","name":"","label":"Encounter at farpoint","order":2,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"PICARD \t\t\tYou will agree, Data, that \t\t\tStarfleet's instructions are \t\t\tdifficult? \t\t\t\t\tDATA \t\t\tDifficult ... how so? Simply \t\t\tsolve the mystery of Farpoint \t\t\tStation. \t\t\t\t\tPICARD \t\t\t\t(smiles) \t\t\tAs simple as that. \t\t\t\t\tTROI \t\t\tFarpoint Station. Even the name \t\t\tsounds mysterious. \t\t\t\t\tPICARD \t\t\tThe problem, Data, is that another \t\t\tlife form built that base. How \t\t\tdo I negotiate a friendly \t\t\tagreement for Starfleet to use \t\t\tit while at the same time snoop \t\t\taround finding how and why they \t\t\tbuilt it? DATA \t\t\tInquiry ... the word snoop ... ? \t\t\t\t\tPICARD \t\t\tData, how can you be programmed \t\t\tas a virtual encyclopedia of human \t\t\tinformation without knowing a \t\t\tsimple word like snoop? \t\t\t\t\tDATA \t\t\tPossibility ... a kind of human \t\t\tbehavior I was not designed to \t\t\temulate? PICARD \t\t\tIt means 'to spy, to sneak' ... \t\t\t\t\tDATA \t\t\t\t(interrupting; \t\t\t\t delighted) \t\t\tAh! To seek covertly, to go \t\t\tstealthily, to slink, slither ... \t\t\t\t\tPICARD \t\t\t\t(wanting to cut it off) \t\t\tExactly, yes \t\t\t\t\tDATA \t\t\tto glide, creep, skulk, \t\t\tpussyfoot, gumshoe TROI \t\t\tCaptain ... I'm sensing a ... a \t\t\tpowerful mind .. WORF \t\t\tSomething strange on the detector \t\t\tcircuits .. DATA \t\t\tIt registers as solid, Captain... \t\t\t\t\tTROI \t\t\tOr an incredibly powerful \t\t\tforcefield. But if we collide \t\t\twith either PICARD \t\t\t\t(to Conn) \t\t\tGo to Condition Yellow. And shut \t\t\toff that damned noise WORF \t\t\tShields and deflectors, up, sir","payloadType":"str","topic":"Encounter at farpoint","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":200,"y":520,"wires":[["91ecc1f88f247a0f"]]},{"id":"87e8360e78f10b90","type":"ui-button","z":"b6818da1a76c1147","group":"953f3f3b3a6e4b28","name":"","label":"Lorem ipsum","order":3,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum erat ac justo sollicitudin, quis lacinia ligula fringilla. Pellentesque hendrerit, nisi vitae posuere condimentum, lectus urna accumsan libero, rutrum commodo mi lacus pretium erat. Phasellus pretium ultrices mi sed semper. Praesent ut tristique magna. Donec nisl tellus, sagittis ut tempus sit amet, consectetur eget erat. Sed ornare gravida lacinia. Curabitur iaculis metus purus, eget pretium est laoreet ut. Quisque tristique augue ac eros malesuada, vitae facilisis mauris sollicitudin. Mauris ac molestie nulla, vitae facilisis quam. Curabitur placerat ornare sem, in mattis purus posuere eget. Praesent non condimentum odio. Nunc aliquet, odio nec auctor congue, sapien justo dictum massa, nec fermentum massa sapien non tellus. Praesent luctus eros et nunc pretium hendrerit. In consequat et eros nec interdum. Ut neque dui, maximus id elit ac, consequat pretium tellus. Nullam vel accumsan lorem","payloadType":"str","topic":"Lorem ipsum","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":230,"y":560,"wires":[["91ecc1f88f247a0f"]]},{"id":"91ecc1f88f247a0f","type":"function","z":"b6818da1a76c1147","name":"Word counter","func":"\nfunction wordCounter(string, minLen) {\n minLen = (!minLen || minLen < 1) ? 1 : minLen;\n var words = string.replace(/[^a-zA-Z]/g, \"\").split(/\\s/);\n var freqMap = {};\n var data = [];\n for (var i = 0; i < words.length; i++) {\n w = words[i].trim();\n if(w.length < minLen) continue;\n if (!freqMap[w]) {\n freqMap[w] = {\n name: w,\n weight: 0\n }\n data.push(freqMap[w]);\n }\n freqMap[w].weight += 1;\n }\n return data;\n}\nconst minChars = 3;\nconst caseSensitive = false;\nif(caseSensitive){\n msg.text = msg.payload();\n} else {\n msg.text = msg.payload.toLowerCase();\n}\nmsg.payload = wordCounter(msg.text, 3);\nreturn msg;","outputs":1,"noerr":0,"x":420,"y":540,"wires":[["163da576e5c69354"]]},{"id":"6fed214e19c630ce","type":"debug","z":"b6818da1a76c1147","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":750,"y":580,"wires":[]},{"id":"50e8181ad5c43512","type":"ui-text","z":"b6818da1a76c1147","group":"953f3f3b3a6e4b28","order":4,"width":0,"height":0,"name":"","label":"Selected","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"msg.topic & ' ' & msg.weight","valueType":"jsonata","x":760,"y":540,"wires":[]},{"id":"953f3f3b3a6e4b28","type":"ui-group","name":"WordCloud","page":"62dd0283a3804436","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"62dd0283a3804436","type":"ui-page","name":"wordcloud-demo","ui":"f1633f89193de4bc","path":"/wordcloud-demo","icon":"home","layout":"grid","theme":"ad84029195b8d5f1","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"f1633f89193de4bc","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"ad84029195b8d5f1","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"4f0157f63be58a66","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.1"}}]

```

---

<div class="post-metadata">

### Author: ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)
#### Post date: [30 January 2026 17:31 UTC](https://discourse.nodered.org/t/need-help-with-wordcloud-template-node-in-dashboard-2/100283/3 "2026-01-30T17:31:54Z")

</div>

Thanks for pointing out what to look for in other template code Steve.

I guess my question becomes more general then....  
Has anyone got a #wordcloud working in Dashboard-2?  
Has anyone see something like the old Dash-1 node: [node-red-node-ui-vega (node) - Node-RED](https://flows.nodered.org/node/node-red-node-ui-vega/in/590bc13ff3a5f005c7d2189bbb563976)  
This node includes a word cloud and a whole lot more.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 January 2026 18:02 UTC](https://discourse.nodered.org/t/need-help-with-wordcloud-template-node-in-dashboard-2/100283/4 "2026-01-30T18:02:00Z")

</div>

> [@thebaldgeek](#):
>
> Has anyone got a #wordcloud working in Dashboard-2?

I already posted a solution for dashboard 2 in the post above.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a9fee91bc368d7c2efe0e10cccec3aabf46a3c79.png)

---

<div class="post-metadata">

### Author: ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)
#### Post date: [31 January 2026 01:52 UTC](https://discourse.nodered.org/t/need-help-with-wordcloud-template-node-in-dashboard-2/100283/5 "2026-01-31T01:52:42Z")

</div>

Thanks Steve.  
I see what happen....If you are using 'DarkReader' extension, the download button is somewhat hidden, and I pasted the old flow, which was still in my clipboard.

Can confirm that the flow is working as expected in Dashboard-2.  
I have some tweaking to do with the payload going into the flow, but that's pretty normal.

Really appreciate the quick turn and hope it helps others going forward.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/34abb722afbc8f88b536b04697b0e1c390fa84de.png)

---

<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: [14 February 2026 01:53 UTC](https://discourse.nodered.org/t/need-help-with-wordcloud-template-node-in-dashboard-2/100283/6 "2026-02-14T01:53:27Z")

</div>

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