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-
How to add labels, like this-
Thanks
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.
[{"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}]
