# Add Labels in X and Y Axis in dashboard Chart node

**URL:** <https://discourse.nodered.org/t/add-labels-in-x-and-y-axis-in-dashboard-chart-node/36233>\
**Category:** Dashboard\
**Created:** [20 November 2020 06:11 UTC](https://discourse.nodered.org/t/add-labels-in-x-and-y-axis-in-dashboard-chart-node/36233 "2020-11-20T06:11:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![vishakraj](https://avatars.discourse-cdn.com/v4/letter/v/9dc877/32.png) [@vishakraj](https://discourse.nodered.org/u/vishakraj)\
**Post date:** [20 November 2020 06:11 UTC](https://discourse.nodered.org/t/add-labels-in-x-and-y-axis-in-dashboard-chart-node/36233/1 "2020-11-20T06:11:17Z")

</div>

Hello,

I am using chart node to display the data in the dashboard.

I like to add the labels in both x and y axis to tell what data is in x and y axis

This is my graph-  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9fb8d99da1e5d97b692b5fd0d03e639990240a6a.png)  
How to add labels, like this-  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/646ac1684e8ffa8d7fa2354cc5c6a73ff1e6a6ea.png)

Thanks

---

<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:** [20 November 2020 17:30 UTC](https://discourse.nodered.org/t/add-labels-in-x-and-y-axis-in-dashboard-chart-node/36233/2 "2020-11-20T17:30:21Z")

</div>

I didn't found any usable configuration to use axis labels alongside with ui\_chart node. The aligning is not possible and the labels drawn outside of boundaries and something is going very wrong with scales also.

But it is possible with using `ui_template` to render your charts, but it takes more work to have same and simple options for you available as the built in chart node provides.

```auto
[{"id":"26d66b9b.186034","type":"ui_template","z":"f1c3712a.51632","group":"304730.1de8e8d","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":850,"y":700,"wires":[[]]},{"id":"29e44bca.6d2594","type":"inject","z":"f1c3712a.51632","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"0.62","topic":"","payload":"","payloadType":"date","x":380,"y":700,"wires":[["98fd0130.0550d"]]},{"id":"98fd0130.0550d","type":"function","z":"f1c3712a.51632","name":"","func":"\nvar m_first = []\nvar m_second = []\nvar a\nvar startTime = 1577836800000\nfor(x=1;x<=25;x++){\n a = {x: new Date(startTime), y: Math.random() * 300}\n m_first.push(a)\n startTime += 86400000\n}\nstartTime = 1577836800000\nfor(x=1;x<=25;x++){\n a = {x: new Date(startTime), y: -2.5 + Math.random() * 5}\n m_second.push(a)\n startTime += 86400000\n}\n\nmsg.payload = {}\nmsg.payload.first = JSON.stringify(m_first)\nmsg.payload.second = JSON.stringify(m_second)\nreturn msg;\n","outputs":1,"noerr":0,"x":530,"y":700,"wires":[["55e9c5a5.e31f0c"]]},{"id":"1f88035e.029a1d","type":"debug","z":"f1c3712a.51632","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":810,"y":740,"wires":[]},{"id":"55e9c5a5.e31f0c","type":"template","z":"f1c3712a.51632","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =300></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#009900','#889900']\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar chart = new Chart(ctx, {\n // The type of chart we want to create\n type: 'line',\n\n // The data for our dataset\n data: {\n labels: [],\n datasets: [\n {\n label: 'First',\n backgroundColor: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.first}}},\n yAxisID: 'left-y-axis',\n steppedLine: true,\n fill: false,\n borderWidth: 1\n },\n {\n label: 'Second',\n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.second}}},\n yAxisID: 'right-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 1\n }\n ]\n },\n\n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n scaleLabel: {\n display: true,\n labelString: 'VALUES',\n fontColor:'#FFFFCC'\n \n },\n gridLines :{display:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n fontColor: linecolors[0]\n }\n },\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n id: 'right-y-axis',\n type: 'linear',\n position: 'right',\n ticks: {\n fontColor:linecolors[1]\n }\n }\n ],\n xAxes: [\n {\n scaleLabel: {\n display: true,\n labelString: 'TIME',\n fontColor:'#FFFFCC'\n \n },\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n type: 'time',\n distribution: 'series',\n ticks: {\n fontColor:textcolor\n }\n }\n]\n }\n }\n});\n</script>\n","output":"str","x":680,"y":700,"wires":[["26d66b9b.186034","1f88035e.029a1d"]]},{"id":"304730.1de8e8d","type":"ui_group","name":"Chart","tab":"ebf9c239.14c15","order":3,"disp":true,"width":"15","collapse":false},{"id":"ebf9c239.14c15","type":"ui_tab","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

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