# Ui\_template and chart.js

**URL:** <https://discourse.nodered.org/t/ui-template-and-chart-js/94825>\
**Category:** Dashboard\
**Tags:** chart, ui-template\
**Created:** [22 January 2025 14:37 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825 "2025-01-22T14:37:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Captain\_Power](https://avatars.discourse-cdn.com/v4/letter/c/ebca7d/32.png) [@Captain\_Power](https://discourse.nodered.org/u/Captain_Power)\
**Post date:** [22 January 2025 14:37 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825/1 "2025-01-22T14:37:48Z")

</div>

Hello everyone!

I try use chart.js from [https://www.chartjs.org/](https://www.chartjs.org/) to draw chart.  
I use simple test code:

> **Code**
>
> ```auto
> <div>
> <canvas id="myChart"></canvas>
> </div>
> 
> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
> 
> <script>
> const ctx = document.getElementById('myChart');
> new Chart(ctx, {    
> data: {	
> labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
> datasets: [{
> type: 'line',
> label: '# of Votes(10)',
> data: [12, 19, 3, 5, 2, 3],
> borderWidth: 2,
> borderColor: 'red'
> },
> {
> type: 'line',
> label: '# of Votes (100)',
> data: [102, 109, 103, 105, 102, 103],
> borderWidth: 2,
> borderColor: 'blue'
> }]
> },
> options: {
> scales: {
> y1: {
> beginAtZero: true,
> position: 'left',
> title: {
> text: 'Temperature',
> display: true,
> color: 'red'
> },
> ticks: {
> color: 'red' // can also use hex color codes
> }	 
> },
> 
> y2: {
>         
> position: 'left',
> title: {
> text: 'Humidity',
> display: true,
> color: 'blue'
> },
> ticks: {
> color: 'blue' // can also use hex color codes
> }	 
> }
> }
> }
> });
> </script>
> 
> ```

If i save this code in html file, and open in browser, chart look perfect!

 ![browser](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/c/9cd9543b780161d15abd77314590c4e3edb6a490.jpeg)

But when i try insert this code to ui\_template node, i see blank screen.

> **JSON**
>
> ```auto
> [
> {
> "id": "ab27c7f3341270ed",
> "type": "tab",
> "label": "Chart TEST",
> "disabled": false,
> "info": "",
> "env": []
> },
> {
> "id": "178a68f4776da7c1",
> "type": "ui_template",
> "z": "ab27c7f3341270ed",
> "group": "36c51f57031b4095",
> "name": "test",
> "order": 1,
> "width": 25,
> "height": 16,
> "format": "<canvas id=\"myChart\"></canvas>\n</div>\n\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<script>\n const ctx = document.getElementById('myChart');\n new Chart(ctx, { \n data: {\t\n labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n datasets: [{\n\ttype: 'line',\n label: '# of Votes(10)',\n data: [12, 19, 3, 5, 2, 3],\n borderWidth: 2,\n\tborderColor: 'red'\n },\n\t{\n\ttype: 'line',\n label: '# of Votes (100)',\n data: [102, 109, 103, 105, 102, 103],\n borderWidth: 2,\n\tborderColor: 'blue'\n }]\n },\n options: {\n scales: {\n y1: {\n beginAtZero: true,\n\t position: 'left',\n title: {\n text: 'Temperature',\n display: true,\n\t\tcolor: 'red'\n },\n ticks: {\n color: 'red' // can also use hex color codes\n }\t \n },\n\n y2: {\n \n position: 'left',\n title: {\n text: 'Humidity',\n display: true,\n\t\tcolor: 'blue'\n },\n ticks: {\n color: 'blue' // can also use hex color codes\n }\t \n }\n\t}\n }\n });\n</script>",
> "storeOutMessages": true,
> "fwdInMessages": true,
> "resendOnRefresh": true,
> "templateScope": "local",
> "className": "",
> "x": 710,
> "y": 240,
> "wires": [
> []
> ]
> },
> {
> "id": "cca53acc427e937b",
> "type": "inject",
> "z": "ab27c7f3341270ed",
> "name": "",
> "props": [
> {
> "p": "payload"
> },
> {
> "p": "topic",
> "vt": "str"
> }
> ],
> "repeat": "",
> "crontab": "",
> "once": false,
> "onceDelay": 0.1,
> "topic": "",
> "payload": "",
> "payloadType": "date",
> "x": 520,
> "y": 240,
> "wires": [
> [
> "178a68f4776da7c1"
> ]
> ]
> },
> {
> "id": "496fdc95fddeb1c5",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 2,
> "width": 1,
> "height": 1
> },
> {
> "id": "eae16c90effd51f0",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 3,
> "width": 1,
> "height": 1
> },
> {
> "id": "ceaabb7880848017",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 4,
> "width": 1,
> "height": 1
> },
> {
> "id": "40287d743afe85a5",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 5,
> "width": 1,
> "height": 1
> },
> {
> "id": "5b1ef2891be4233e",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 6,
> "width": 1,
> "height": 1
> },
> {
> "id": "a3ee4c024a8a1918",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 7,
> "width": 1,
> "height": 1
> },
> {
> "id": "915d2422698924a7",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 8,
> "width": 1,
> "height": 1
> },
> {
> "id": "e4abac1f0eed716f",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 9,
> "width": 1,
> "height": 1
> },
> {
> "id": "04fe3abe0aa653f8",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 10,
> "width": 1,
> "height": 1
> },
> {
> "id": "753f70478a9205bc",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 11,
> "width": 1,
> "height": 1
> },
> {
> "id": "17f0d318708d030d",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 12,
> "width": 1,
> "height": 1
> },
> {
> "id": "5de16aae52d36109",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 13,
> "width": 1,
> "height": 1
> },
> {
> "id": "9cd1a0685eb1ef3c",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 14,
> "width": 1,
> "height": 1
> },
> {
> "id": "622aa7c9c2237b9c",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 15,
> "width": 1,
> "height": 1
> },
> {
> "id": "ec7110b3cc7e513a",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 16,
> "width": 1,
> "height": 1
> },
> {
> "id": "f7cb750d81591e0e",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 17,
> "width": 1,
> "height": 1
> },
> {
> "id": "9bc1395a1104547a",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 19,
> "width": 1,
> "height": 1
> },
> {
> "id": "85be989ed6c815c0",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 20,
> "width": 1,
> "height": 1
> },
> {
> "id": "fb97af87a92fbf9d",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 21,
> "width": 1,
> "height": 1
> },
> {
> "id": "8b88a95bfbefd906",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 22,
> "width": 1,
> "height": 1
> },
> {
> "id": "82a3c535641933e1",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 23,
> "width": 1,
> "height": 1
> },
> {
> "id": "613825af9d3c8912",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 24,
> "width": 1,
> "height": 1
> },
> {
> "id": "5033f51e8b5288be",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 25,
> "width": 1,
> "height": 1
> },
> {
> "id": "54108d0af9875f38",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 26,
> "width": 1,
> "height": 1
> },
> {
> "id": "875bdcf3d64b080a",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 27,
> "width": 1,
> "height": 1
> },
> {
> "id": "691399c6dd59e270",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 28,
> "width": 1,
> "height": 1
> },
> {
> "id": "d878c012b296fb43",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 29,
> "width": 1,
> "height": 1
> },
> {
> "id": "30f854b9aeb553ff",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 30,
> "width": 1,
> "height": 1
> },
> {
> "id": "e9d971a2073a0a86",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 31,
> "width": 1,
> "height": 1
> },
> {
> "id": "9046fa92f3c5b75f",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 32,
> "width": 1,
> "height": 1
> },
> {
> "id": "c1adefb4f5da260b",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 33,
> "width": 1,
> "height": 1
> },
> {
> "id": "5d25e0fd0e5c4730",
> "type": "ui_spacer",
> "z": "ab27c7f3341270ed",
> "name": "spacer",
> "group": "36c51f57031b4095",
> "order": 34,
> "width": 1,
> "height": 1
> },
> {
> "id": "36c51f57031b4095",
> "type": "ui_group",
> "name": "Crat_js_test",
> "tab": "4d49a13f86dab141",
> "order": 1,
> "disp": true,
> "width": "26",
> "collapse": false,
> "className": ""
> },
> {
> "id": "4d49a13f86dab141",
> "type": "ui_tab",
> "name": "Test",
> "icon": "dashboard",
> "disabled": false,
> "hidden": false
> }
> ]
> 
> ```

What am I doing wrong?  
Thanks for your help!

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [22 January 2025 19:33 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825/2 "2025-01-22T19:33:10Z")

</div>

If you are talking about Dashboard 2 it works for me (the code in a` ui_template` node - did not try the flow) . Try refreshing the page in the browser

```auto
[{"id":"bb42c31bb8319722","type":"ui-template","z":"739e48e889ba0251","group":"44d16b614149039d","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"\n <div>\n <canvas id=\"myChart\"></canvas>\n </div>\n\n\n\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<script>\n const ctx = document.getElementById('myChart');\n new Chart(ctx, { \n data: {\t\n labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n datasets: [{\n\ttype: 'line',\n label: '# of Votes(10)',\n data: [12, 19, 3, 5, 2, 3],\n borderWidth: 2,\n\tborderColor: 'red'\n },\n\t{\n\ttype: 'line',\n label: '# of Votes (100)',\n data: [102, 109, 103, 105, 102, 103],\n borderWidth: 2,\n\tborderColor: 'blue'\n }]\n },\n options: {\n scales: {\n y1: {\n beginAtZero: true,\n\t position: 'left',\n title: {\n text: 'Temperature',\n display: true,\n\t\tcolor: 'red'\n },\n ticks: {\n color: 'red' // can also use hex color codes\n }\t \n },\n\n y2: {\n \n position: 'left',\n title: {\n text: 'Humidity',\n display: true,\n\t\tcolor: 'blue'\n },\n ticks: {\n color: 'blue' // can also use hex color codes\n }\t \n }\n\t}\n }\n });\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1660,"y":620,"wires":[[]]},{"id":"44d16b614149039d","type":"ui-group","name":"Tester","page":"285e57cf621c6550","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"285e57cf621c6550","type":"ui-page","name":"Zigbee Battery Monitor","ui":"80f2e5f9dbf80780","path":"/page12","icon":"home","layout":"grid","theme":"a5bbf4397c8aa75a","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":2,"className":"","visible":"true","disabled":"false"},{"id":"80f2e5f9dbf80780","type":"ui-base","name":"Environment","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"a5bbf4397c8aa75a","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"5px","widgetGap":"12px","density":"default"}}]

```

---

<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:** [22 January 2025 19:48 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825/3 "2025-01-22T19:48:57Z")

</div>

It definitely misses one critical step...  
The loaded script must be ready to use  
See example here

> **[Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#loading-external-dependencies)**
>
> Harness the power of ui-template in Node-RED Dashboard 2.0 to design custom widgets and unique dashboard layouts.

---

<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:** [22 January 2025 19:54 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825/4 "2025-01-22T19:54:06Z")

</div>

> [@Buckskin](#):
>
> talking about Dashboard 2

The user posted a flow with the type `ui_template` so this is dashboard 1. The node types in dashboard 2 use a dash (e.g. `ui-template`). This was a design choice to avoid node type clashes. Turns out it's a fairly reliable way to infer which it is when the op doesn't use the #dashboard-2 tag.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [22 January 2025 20:02 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825/5 "2025-01-22T20:02:48Z")

</div>

Sorry, missed that. I unfortunately assumed (ass & me) that as they were trying standard code they were using Dashboard 2

---

<div class="post-metadata">

**Author:** ![Captain\_Power](https://avatars.discourse-cdn.com/v4/letter/c/ebca7d/32.png) [@Captain\_Power](https://discourse.nodered.org/u/Captain_Power)\
**Post date:** [24 January 2025 09:18 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825/6 "2025-01-24T09:18:40Z")

</div>

Thanks a lot !  
After add check on load java-script, all work fine!

---

<div class="post-metadata">

**Author:** ![Captain\_Power](https://avatars.discourse-cdn.com/v4/letter/c/ebca7d/32.png) [@Captain\_Power](https://discourse.nodered.org/u/Captain_Power)\
**Post date:** [24 January 2025 09:22 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825/7 "2025-01-24T09:22:16Z")

</div>

Thanks all!  
After add check on load java-script, all work fine!

> **code**
>
> ```auto
> <div>
> <canvas id="myChart"></canvas>
> </div>
> 
> <script id="hljs" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
> 
> <script>
> function init () {
> draw_chart();
> }
> 
> // run this code when the widget is built
> let interval = setInterval(() => {
> if (window.Chart) {
> init();
> clearInterval(interval);
> }
> }, 100);
> </script>
> 
> <script>
> function draw_chart()
> {
> const ctx = document.getElementById('myChart');
> new Chart(ctx, {
> data: {
> 
> labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
> datasets: [{
> type: 'line',
> label: '# of Votes(10)',
> data: [12, 19, 3, 5, 2, 3],
> borderWidth: 2,
> borderColor: 'red'
> },
> {
> type: 'line',
> label: '# of Votes (100)',
> data: [102, 109, 103, 105, 102, 103],
> borderWidth: 2,
> borderColor: 'blue'
> }]
> },
> options: {
> scales: {
> y1: {
> 
> position: 'left',
> title: {
> text: 'Temperature',
> display: true,
> color: 'red'
> },
> ticks: {
> color: 'red' // can also use hex color codes
> }
> },
>   
> y2: {
>   
> position: 'left',
> title: {
> text: 'Humidity',
> display: true,
> color: 'blue'
> },
> ticks: {
> color: 'blue' // can also use hex color codes
> }
> }
> }
> }
> });
> }
> </script>
> 
> ```

All thanks for help!

---

<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:** [23 February 2025 09:22 UTC](https://discourse.nodered.org/t/ui-template-and-chart-js/94825/8 "2025-02-23T09:22:48Z")

</div>

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