# Insert Dynamic Labels for ChartJS into Template Node

**URL:** <https://discourse.nodered.org/t/insert-dynamic-labels-for-chartjs-into-template-node/81648>\
**Category:** General\
**Created:** [28 September 2023 18:12 UTC](https://discourse.nodered.org/t/insert-dynamic-labels-for-chartjs-into-template-node/81648 "2023-09-28T18:12:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![KAMERONSWENSON](https://avatars.discourse-cdn.com/v4/letter/k/df788c/32.png) [@KAMERONSWENSON](https://discourse.nodered.org/u/KAMERONSWENSON)\
**Post date:** [28 September 2023 18:12 UTC](https://discourse.nodered.org/t/insert-dynamic-labels-for-chartjs-into-template-node/81648/1 "2023-09-28T18:12:52Z")

</div>

Hello,

I have a flow that I am wanting to insert data into chartJS through a template node into the UI template node to view chartjs on dashboard. I have attached the pictures in the following order:

Inject =\> Function Node =\> Template Node =\> UI Template Node

The issue I am having is within the data field I can reference the incoming payload with {{payload.value}} but for some reason the labels field that I reference using {{payload.label}} isn't being as an options inside the chart. My suspicion is that the payload being seen for data in the template node is seen as [210, 40, 70] but since I am using the same method for the label field its seeing [Test1, Test2, Test3] which doesn't work because I think the template node doesn't recognize those as string values. Correct me if this is a bad assumption. Could anyone help me to get this to work. This is just testing data for simplicity.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/756e6a1b6c278a89052e6e405fcecf52c5726507.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/b/5bcd2bba6bfa18613f49ed780a77348d857125a6.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2cf458e36d35b5b11e6de8c102a345d24f5c03e0.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/beb4cc09357be1661a5625ac48e6f50aefc3ba31.png)

---

<div class="post-metadata">

**Author:** ![KAMERONSWENSON](https://avatars.discourse-cdn.com/v4/letter/k/df788c/32.png) [@KAMERONSWENSON](https://discourse.nodered.org/u/KAMERONSWENSON)\
**Post date:** [28 September 2023 18:13 UTC](https://discourse.nodered.org/t/insert-dynamic-labels-for-chartjs-into-template-node/81648/2 "2023-09-28T18:13:31Z")

</div>

[  
{  
"id": "c93a7f1f3cab2868",  
"type": "template",  
"z": "97e8bc0a60037121",  
"name": "",  
"field": "template",  
"fieldType": "msg",  
"format": "handlebars",  
"syntax": "mustache",  
"template": "\<canvas id="myChart"\>\n\n",  
"output": "str",  
"x": 480,  
"y": 140,  
"wires": [  
[  
"1d3f757555c253a9"  
]  
]  
},  
{  
"id": "1d3f757555c253a9",  
"type": "ui\_template",  
"z": "97e8bc0a60037121",  
"group": "cf47fdd7b9aa2723",  
"name": "",  
"order": 1,  
"width": 15,  
"height": 12,  
"format": "",  
"storeOutMessages": true,  
"fwdInMessages": true,  
"resendOnRefresh": true,  
"templateScope": "local",  
"className": "",  
"x": 660,  
"y": 140,  
"wires": [  
  
]  
},  
{  
"id": "fb4d4c266c4ccbb6",  
"type": "inject",  
"z": "97e8bc0a60037121",  
"name": "",  
"props": [  
{  
"p": "payload"  
},  
{  
"p": "topic",  
"vt": "str"  
}  
],  
"repeat": "",  
"crontab": "",  
"once": false,  
"onceDelay": 0.1,  
"topic": "",  
"payload": "[{"value":210,"label":"Test1"},{"value":40,"label":"Test2"},{"value":70,"label":"Test3"}]",  
"payloadType": "json",  
"x": 110,  
"y": 140,  
"wires": [  
[  
"2c60718fee0f3464"  
]  
]  
},  
{  
"id": "2c60718fee0f3464",  
"type": "function",  
"z": "97e8bc0a60037121",  
"name": "function 28",  
"func": "let data = msg.payload\nlet values = data.map(value =\> value.value)\nlet labels = data.map(labels =\> labels.label)\n\n\nreturn {payload: {"value": values, "label": labels}}",  
"outputs": 1,  
"noerr": 0,  
"initialize": "",  
"finalize": "",  
"libs": ,  
"x": 250,  
"y": 140,  
"wires": [  
[  
"c93a7f1f3cab2868"  
]  
]  
},  
{  
"id": "cf47fdd7b9aa2723",  
"type": "ui\_group",  
"name": "Group 1",  
"tab": "f451efd2a90a8ef8",  
"order": 1,  
"disp": true,  
"width": 30  
},  
{  
"id": "f451efd2a90a8ef8",  
"type": "ui\_tab",  
"name": "Tab 2",  
"icon": "dashboard",  
"order": 2  
}  
]

---

<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:** [27 November 2023 18:14 UTC](https://discourse.nodered.org/t/insert-dynamic-labels-for-chartjs-into-template-node/81648/3 "2023-11-27T18:14:04Z")

</div>

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