# \#ui-template

**URL:** https://discourse.nodered.org/tag/ui-template/128.md

[Latest](https://discourse.nodered.org/latest.md) · [Categories](https://discourse.nodered.org/categories.md) · [Tags](https://discourse.nodered.org/tags.md)

---

## [DB2: ui-template eCharts fails to load](https://discourse.nodered.org/t/db2-ui-template-echarts-fails-to-load/100578)

<div class="topic-metadata">

**Author:** [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Replies:** 5\
**Last updated:** [16 March 2026 19:39 UTC](https://discourse.nodered.org/t/db2-ui-template-echarts-fails-to-load/100578 "2026-03-16T19:39:02Z")

</div>

Hello: None of my eCharts are rendering - this was working about 1 week ago (we were on vacation) and when I tried today, none of the charts work. Regular NR bar charts, pie charts are working but nothing that uses eCha…

---

## [eChart: how can I make the tooltip visible?](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078)

<div class="topic-metadata">

**Author:** [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Replies:** 56\
**Last updated:** [19 January 2026 10:08 UTC](https://discourse.nodered.org/t/echart-how-can-i-make-the-tooltip-visible/100078 "2026-01-19T10:08:24Z")

</div>

I have managed to create an echart with the template node. However, i am not able to display the tooltip with the legend. Can anybody help? Here my node: \[ { "id": "c4f7b79d0d16995b", "type": "ui-te…

---

## [Problems displaying live data in template with chartjs](https://discourse.nodered.org/t/problems-displaying-live-data-in-template-with-chartjs/100046)

<div class="topic-metadata">

**Author:** [@joachim\_bl](https://discourse.nodered.org/u/joachim_bl)\
**Replies:** 13\
**Last updated:** [2 January 2026 19:56 UTC](https://discourse.nodered.org/t/problems-displaying-live-data-in-template-with-chartjs/100046 "2026-01-02T19:56:00Z")

</div>

I am trying to create a graph with 3 y axis using the ui-template of flowfuse but I have problems setting the data points. Here is the logic: \[ { "id": "92fb440a9871ab5d", "type": "catch", "…

---

## [Can not change the hint color of the v-text-field and v-select in Node-RED](https://discourse.nodered.org/t/can-not-change-the-hint-color-of-the-v-text-field-and-v-select-in-node-red/99292)

<div class="topic-metadata">

**Author:** [@Kang](https://discourse.nodered.org/u/Kang)\
**Replies:** 1\
**Last updated:** [7 October 2025 11:10 UTC](https://discourse.nodered.org/t/can-not-change-the-hint-color-of-the-v-text-field-and-v-select-in-node-red/99292 "2025-10-07T11:10:34Z")

</div>

Hi, sir Here is my code, and it is strange that the hint color is changed to orange in VPlay, however the hint color remains the same in my dashboard2. Pls find this picture for the difference: \<template\> \<div cl…

---

## [How to make a style variable in css ui-tample node](https://discourse.nodered.org/t/how-to-make-a-style-variable-in-css-ui-tample-node/99231)

<div class="topic-metadata">

**Author:** [@kelvin\_S](https://discourse.nodered.org/u/kelvin_S)\
**Replies:** 3\
**Last updated:** [6 October 2025 10:22 UTC](https://discourse.nodered.org/t/how-to-make-a-style-variable-in-css-ui-tample-node/99231 "2025-10-06T10:22:14Z")

</div>

Dear all, I'm making a dashboard and i have a line that can visualize when energy is flowing, ui-template code: \<div style="position: relative; width: 190px; height: 40px;"\> \<div class="energy-line" style="position…

---

## [Ui-template with chart.js/eCharts - vue lifecycle hooks](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971)

<div class="topic-metadata">

**Author:** [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Replies:** 7\
**Last updated:** [6 September 2025 20:41 UTC](https://discourse.nodered.org/t/ui-template-with-chart-js-echarts-vue-lifecycle-hooks/98971 "2025-09-06T20:41:42Z")

</div>

Hello: I recently updated my flows from Dashboard1 to Dashboard2. In the process I migrated all my charts to chart.js (I already had some in DB1 but had others that were native DB1 charts). And because I’m a sucker for …

---

## [Custom solution for Dashboard chart settings - font, point colour, axis labels, etc](https://discourse.nodered.org/t/custom-solution-for-dashboard-chart-settings-font-point-colour-axis-labels-etc/98961)

<div class="topic-metadata">

**Author:** [@Lukario250](https://discourse.nodered.org/u/Lukario250)\
**Replies:** 4\
**Last updated:** [6 September 2025 20:36 UTC](https://discourse.nodered.org/t/custom-solution-for-dashboard-chart-settings-font-point-colour-axis-labels-etc/98961 "2025-09-06T20:36:13Z")

</div>

Hello there I’m currently working on an IoT project so I had the need to customize Node-RED charts so what I did was to use a function before the chart where I modify all the settings for the chart so I can visualize it …

---

## [Dashboard-2 ui-template](https://discourse.nodered.org/t/dashboard-2-ui-template/98604)

<div class="topic-metadata">

**Author:** [@SergioRT](https://discourse.nodered.org/u/SergioRT)\
**Replies:** 12\
**Last updated:** [3 September 2025 09:29 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604 "2025-09-03T09:29:29Z")

</div>

I am becoming nuts ! This is the configuraton of a simple ui-template And this is the result HTML interpretation does not work ! Did I do somethng wrong ? Is there something special to configure ? Thanks for y…

---

## [How to change Clicked\_Button appearance](https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654)

<div class="topic-metadata">

**Author:** [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Replies:** 4\
**Last updated:** [14 August 2025 09:32 UTC](https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654 "2025-08-14T09:32:40Z")

</div>

\[{"id":"f4072154f91a999d","type":"inject","z":"0717a61e1ce5f6fe","name":"","props":\[{"p":"payload"},{"p":"mc","v":"\[\\"m%\\",\\"m00\\",\\"m01\\",\\"m02\\",\\"m03\\",\\"m04\\"\]","vt":"json"},{"p":"nick","v":"\[\\"All\\",\\"Machine-00\\",\\…

---

## [Dynamically change class of a button in template node](https://discourse.nodered.org/t/dynamically-change-class-of-a-button-in-template-node/98482)

<div class="topic-metadata">

**Author:** [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Replies:** 1\
**Last updated:** [3 August 2025 16:17 UTC](https://discourse.nodered.org/t/dynamically-change-class-of-a-button-in-template-node/98482 "2025-08-03T16:17:23Z")

</div>

\<template\> \<Teleport v-if="mounted" to="#app-bar-title"\> \<div width = "auto" class="btn-group"\> \<v-btn class='button1' @click="send({payload:'b2'})"\>Machines\</v-btn\> \<v-btn class='bu…

---

## [Trouble with data preparation for ui-chart in template node](https://discourse.nodered.org/t/trouble-with-data-preparation-for-ui-chart-in-template-node/98219)

<div class="topic-metadata">

**Author:** [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Replies:** 2\
**Last updated:** [20 July 2025 12:00 UTC](https://discourse.nodered.org/t/trouble-with-data-preparation-for-ui-chart-in-template-node/98219 "2025-07-20T12:00:22Z")

</div>

\[{"id":"58e784fbf7b146f2","type":"change","z":"9cd9fa2d0d2e7202","name":"Option-4","rules":\[{"t":"set","p":"payload","pt":"msg","to":"\[{\\"nick\\":\\"MSP1\\",\\"mc\\":\\"m01\\",\\"Machine\\":\\"MACHINE-1\\",\\"Downtime\\":17,\\"rdate\\"…

---

## [Vuejs Composition API in Dashboard 2.0 ui template](https://discourse.nodered.org/t/vuejs-composition-api-in-dashboard-2-0-ui-template/96818)

<div class="topic-metadata">

**Author:** [@Cimanes](https://discourse.nodered.org/u/Cimanes)\
**Replies:** 0\
**Last updated:** [30 April 2025 08:07 UTC](https://discourse.nodered.org/t/vuejs-composition-api-in-dashboard-2-0-ui-template/96818 "2025-04-30T08:07:36Z")

</div>

Hi, I am pretty new to NodeRed. I find it amazing, I am now getting familiar with Dashboard 2.0. I have a quick question about ui templates. Looking at the documentation, I find: ## Building Full Vue Components You c…

---

## [Text in node 'template' does not get red. Why?](https://discourse.nodered.org/t/text-in-node-template-does-not-get-red-why/96784)

<div class="topic-metadata">

**Author:** [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Replies:** 1\
**Last updated:** [28 April 2025 09:47 UTC](https://discourse.nodered.org/t/text-in-node-template-does-not-get-red-why/96784 "2025-04-28T09:47:32Z")

</div>

Hi all I am currently trying to adjust the text, text size and colour in the dashboard. But I'm already failing with this: \<!DOCTYPE html\> \<html\> \<head\> \<style\> p {color: red;} \</styl…

---

## [Import Temperature Information from Shelly Plus 2PM, build Thermostat in Red Node](https://discourse.nodered.org/t/import-temperature-information-from-shelly-plus-2pm-build-thermostat-in-red-node/96668)

<div class="topic-metadata">

**Author:** [@mountain](https://discourse.nodered.org/u/mountain)\
**Replies:** 2\
**Last updated:** [21 April 2025 07:51 UTC](https://discourse.nodered.org/t/import-temperature-information-from-shelly-plus-2pm-build-thermostat-in-red-node/96668 "2025-04-21T07:51:08Z")

</div>

Hi, my name is Mountain and I'm pretty new to red node, nevertheless I managed to get most of my planned functions working. I am running a Victron Multiplus II GX system and want to use Shelly to automize various functio…

---

## [Applying Template code to all ui-table](https://discourse.nodered.org/t/applying-template-code-to-all-ui-table/96146)

<div class="topic-metadata">

**Author:** [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Replies:** 0\
**Last updated:** [21 March 2025 06:40 UTC](https://discourse.nodered.org/t/applying-template-code-to-all-ui-table/96146 "2025-03-21T06:40:48Z")

</div>

Hi guys, I am trying to understand how can i use template node to customize the dashboard 2.0 table; and using UI template Examples documentation as a reference. In documentation, we have to connect the template nod…

---

## [Odd behaviour / rendering & Unable to set date from msg.payload](https://discourse.nodered.org/t/odd-behaviour-rendering-unable-to-set-date-from-msg-payload/96134)

<div class="topic-metadata">

**Author:** [@Dyslexicbloke](https://discourse.nodered.org/u/Dyslexicbloke)\
**Replies:** 3\
**Last updated:** [20 March 2025 21:58 UTC](https://discourse.nodered.org/t/odd-behaviour-rendering-unable-to-set-date-from-msg-payload/96134 "2025-03-20T21:58:44Z")

</div>

I have the following code in a Dashboard 2.0 template node... \<template\> \<v-container\> \<v-row justify="space-around"\> \<v-date-picker v-model="value" show-adjacent-months reactive = "true" …

---

## [Dashboard2 - template node - debugging](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686)

<div class="topic-metadata">

**Author:** [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Replies:** 14\
**Last updated:** [27 February 2025 21:14 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686 "2025-02-27T21:14:57Z")

</div>

Need advice, what is the best way to write and debug HTML/JS code in “template node”. Firefox DevTools only partially helps, the generated debug links don't point to the code. Can version control be used?

---

## [Conditional animation iu-template dashboard 2](https://discourse.nodered.org/t/conditional-animation-iu-template-dashboard-2/95695)

<div class="topic-metadata">

**Author:** [@Pepex7](https://discourse.nodered.org/u/Pepex7)\
**Replies:** 0\
**Last updated:** [27 February 2025 15:05 UTC](https://discourse.nodered.org/t/conditional-animation-iu-template-dashboard-2/95695 "2025-02-27T15:05:52Z")

</div>

I'm adding with ui-template an icon for alerts in dashboard 2. \<template\> \<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"\> \<div style="text-ali…

---

## [Changing Group title bar text separately for different msg object value instances](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306)

<div class="topic-metadata">

**Author:** [@yxuser](https://discourse.nodered.org/u/yxuser)\
**Replies:** 13\
**Last updated:** [13 February 2025 04:13 UTC](https://discourse.nodered.org/t/changing-group-title-bar-text-separately-for-different-msg-object-value-instances/95306 "2025-02-13T04:13:25Z")

</div>

Hi, is there any way to change Group Title Bar text for separate instances? I could edit the first using \<style\> .nr-dashboard-cardtitle { font-family: 'Courier New', monospace !important; font-s…

---

## [Ui\_template and chart.js](https://discourse.nodered.org/t/ui-template-and-chart-js/94825)

<div class="topic-metadata">

**Author:** [@Captain\_Power](https://discourse.nodered.org/u/Captain_Power)\
**Replies:** 6\
**Last updated:** [24 January 2025 09:22 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825 "2025-01-24T09:22:16Z")

</div>

Hello everyone! I try use chart.js from https://www.chartjs.org/ to draw chart. I use simple test code: ▶ Code If i save this code in html file, and open in browser, chart look perfect! But when i try insert this c…

---

## [How to disable the mouse wheel?](https://discourse.nodered.org/t/how-to-disable-the-mouse-wheel/93740)

<div class="topic-metadata">

**Author:** [@Artazis](https://discourse.nodered.org/u/Artazis)\
**Replies:** 2\
**Last updated:** [6 December 2024 21:24 UTC](https://discourse.nodered.org/t/how-to-disable-the-mouse-wheel/93740 "2024-12-06T21:24:33Z")

</div>

Hello, I have a page generated by Node-RED for managing my electric heating. I’m increasing the number of zones a bit to better manage my consumption. On this page, I have a lot of sliders (sliders) and the page is qui…

---

## [Issue Integrating Chart.js with Node-RED Dashboard 2.0 (Vue-based Template Node)](https://discourse.nodered.org/t/issue-integrating-chart-js-with-node-red-dashboard-2-0-vue-based-template-node/93174)

<div class="topic-metadata">

**Author:** [@juancho72h](https://discourse.nodered.org/u/juancho72h)\
**Replies:** 7\
**Last updated:** [16 November 2024 20:53 UTC](https://discourse.nodered.org/t/issue-integrating-chart-js-with-node-red-dashboard-2-0-vue-based-template-node/93174 "2024-11-16T20:53:08Z")

</div>

Hello everyone, I'm currently facing an issue trying to integrate Chart.js with Node-RED Dashboard 2.0 using a Vue-based template node. I am hoping to see if anyone has successfully managed to do this or can provide som…

---

## [Passing msg.payload into template node \<script\>](https://discourse.nodered.org/t/passing-msg-payload-into-template-node-script/92788)

<div class="topic-metadata">

**Author:** [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Replies:** 3\
**Last updated:** [31 October 2024 05:42 UTC](https://discourse.nodered.org/t/passing-msg-payload-into-template-node-script/92788 "2024-10-31T05:42:42Z")

</div>

I am trying to pass on the contents of a msg.payload to build a dynamic table and have done fair bit of research before posting this finally in despair. there are several threads on this in the forum , but i am unable t…

---

## [Displaying Image in Node Red Dashboard](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720)

<div class="topic-metadata">

**Author:** [@grzegorzjanusz](https://discourse.nodered.org/u/grzegorzjanusz)\
**Replies:** 26\
**Last updated:** [29 October 2024 13:31 UTC](https://discourse.nodered.org/t/displaying-image-in-node-red-dashboard/92720 "2024-10-29T13:31:27Z")

</div>

Hi, I'm a new node-red user and I'm facing with a small problem. I would like to display a photo from my computer in Dashboard, but unfortunately it doesn't work at all. I know it seems simple, but I have no idea why it …

---

## [Convert template for Dashboard 1 to template for dashboard 2](https://discourse.nodered.org/t/convert-template-for-dashboard-1-to-template-for-dashboard-2/92411)

<div class="topic-metadata">

**Author:** [@Manuwa](https://discourse.nodered.org/u/Manuwa)\
**Replies:** 7\
**Last updated:** [15 October 2024 18:12 UTC](https://discourse.nodered.org/t/convert-template-for-dashboard-1-to-template-for-dashboard-2/92411 "2024-10-15T18:12:34Z")

</div>

Hello dear forum. I am in the process of moving from Dashboard 1 to Dashboard 2. Most of it works. Unfortunately, I'm having a hard time getting my created templates to work on the new dashboard. Unfortunately I am no…

---

## [Dashboard 2.0 ui-template multiple injections](https://discourse.nodered.org/t/dashboard-2-0-ui-template-multiple-injections/91231)

<div class="topic-metadata">

**Author:** [@stgj](https://discourse.nodered.org/u/stgj)\
**Replies:** 7\
**Last updated:** [2 October 2024 16:03 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-template-multiple-injections/91231 "2024-10-02T16:03:59Z")

</div>

Hi. I have a use case where I ask devices out in the field (PLS and the like) over different protocols, like Modbus, Omron FINS etc. This data I get back and I process that data and presents the data to a user through u…

---

## [Ui-template -\> using V1 state timeline](https://discourse.nodered.org/t/ui-template-using-v1-state-timeline/91048)

<div class="topic-metadata">

**Author:** [@LoRdOfUnO](https://discourse.nodered.org/u/LoRdOfUnO)\
**Replies:** 1\
**Last updated:** [18 September 2024 05:23 UTC](https://discourse.nodered.org/t/ui-template-using-v1-state-timeline/91048 "2024-09-18T05:23:54Z")

</div>

Hi, I run into trouble using DashboardV2 ui template. I used the V1 before, and using this example made a nice looking graph. But i can't get it to work on V2. Event Timeline Dashboard Graph (flow) - Node-RED (nodere…

---

## [UI-Template Plotly Integration](https://discourse.nodered.org/t/ui-template-plotly-integration/90725)

<div class="topic-metadata">

**Author:** [@sesenlik1](https://discourse.nodered.org/u/sesenlik1)\
**Replies:** 0\
**Last updated:** [5 September 2024 07:13 UTC](https://discourse.nodered.org/t/ui-template-plotly-integration/90725 "2024-09-05T07:13:04Z")

</div>

Hi all, I successfully integrated Plotly charts into my Dashboard 2.0 using ui-template. But I'm having problem sizing ui-template inside the dashboard group. If I set the ui-template size as auto in node properties, th…

---

## [Dashboard 2.0 template node](https://discourse.nodered.org/t/dashboard-2-0-template-node/90384)

<div class="topic-metadata">

**Author:** [@jeffery](https://discourse.nodered.org/u/jeffery)\
**Replies:** 2\
**Last updated:** [25 August 2024 05:40 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node/90384 "2024-08-25T05:40:57Z")

</div>

Trying to move a simple dashboard 1.0 template node to dashboard 2.0 My code from dashboard 1, The color of the heart is sent from the microcontroller, to give the dashboard a heart beat from the microcontroller. \<p\> …

---

## [Using primevue and other npm package on Dashboard 2.0 ui-template](https://discourse.nodered.org/t/using-primevue-and-other-npm-package-on-dashboard-2-0-ui-template/90123)

<div class="topic-metadata">

**Author:** [@raffaele](https://discourse.nodered.org/u/raffaele)\
**Replies:** 1\
**Last updated:** [14 August 2024 08:43 UTC](https://discourse.nodered.org/t/using-primevue-and-other-npm-package-on-dashboard-2-0-ui-template/90123 "2024-08-14T08:43:09Z")

</div>

Good day, I try to use the primevue UI suite with the ui-template in Nodered Dashboard 2.0. I installed PrimeVue with the npm in the .node-red directory. In the ui-template I insert the following code to text an examp…

[Next page](https://discourse.nodered.org/tag/ui-template/128.md?match_all_tags=true&page=1&tags%5B%5D=ui-template)
