Line Chart Series Labels

[crankshaft]

If I understand correctly, the series labels cannot be changed for line charts, which is making my line charts impossible to read.

The reason is I have several sensors with mac addresses, however these mac addresses are meaningless to the end user and what they need to see is a a user-friendly name of where the sensor is located such as upstairs, outside instead of the mac address.

showing the mac address of these sensors instead of their related location means that the charts cant really be easily understood by the uer.

But it looks like this cannot be done for line charts, and that the series id is always used as the series displayed name, rather than allowing a series label.

Is there any workaround for this as it really is a show-stopper for using the line chart to show historical data for my sensors ?!

[dceejay]

a function before the chart to lookup/replace the mac with the location ?

[hotNipi]

Hard to do with chart node (actually nearly impossible cos tooltip requires direct reference to the chart but you can't get it if using the ui_control.options), but easy enough, if you do your chart using ui_template and raw chartjs library.

Using an old example, the tooltip part added to it.

[{"id":"667ca586.609b0c","type":"ui_template","z":"86fb73e0.f92d","group":"3b8a9dc8.db09d2","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":570,"y":260,"wires":[[]]},{"id":"d98fb841.f37168","type":"inject","z":"86fb73e0.f92d","name":"","topic":"","payload":"","payloadType":"date","repeat":"4","crontab":"","once":false,"onceDelay":"0.62","x":210,"y":230,"wires":[["e1513cbd.63ac2"]]},{"id":"e1513cbd.63ac2","type":"function","z":"86fb73e0.f92d","name":"fake live data","func":"msg.payload = {}\nmsg.payload.first = Math.random() * 300\nmsg.payload.second = -2.5 + Math.random() * 5\nreturn msg;\n","outputs":1,"noerr":0,"x":370,"y":230,"wires":[["667ca586.609b0c"]]},{"id":"c7cb2bfe.639b78","type":"template","z":"86fb73e0.f92d","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']\nvar maxDataPoints = 20\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: [],\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: [],\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       tooltips: {\n            callbacks: {\n                title: function(tooltipItem, data) {\n                    return \"Custom Tooltip Title\"\n                },\n                 \n                label: function(tooltipItem, data) {\n                    //var label = data.datasets[tooltipItem.datasetIndex].label || '';\n                    var label = \"Human friendly name \"+tooltipItem.datasetIndex\n                    if (label) {\n                        label += ': ';\n                    }\n                    label += Math.round(tooltipItem.yLabel * 100) / 100;\n                    return label;\n                }\n            }\n        },\n        scales: {\n            yAxes: [\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                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    type: 'time',\n                    distribution: 'series',\n                    time:{\n                        displayFormats: {\n                            quarter: 'MMM YYYY',\n                            millisecond:'h:mm:ss',\n                            second:\t'h:mm:ss',\n                            minute:\t'h:mm',\n                            hour:\t'h'                        \n                        }\n                    },\n                    \n                    ticks: {\n                        fontColor:textcolor\n                    }\n                }\n            ]\n        }\n    }\n});\nfunction addData(chart, data, label) {\n    chart.data.datasets.forEach((dataset) => {\n        if(dataset.label == label){\n            dataset.data.push(data);\n        }\n        if(dataset.data.length > maxDataPoints){\n            dataset.data.shift()\n        }\n    });\n    chart.update(0);//0 means no animation\n}\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      // Do something when msg arrives\n      addData(chart,{x:new Date(),y:msg.payload.first},\"first\")\n      addData(chart,{x:new Date(),y:msg.payload.second},\"second\")\n\n    }\n  });\n})(scope);\n</script>\n","output":"str","x":360,"y":290,"wires":[["667ca586.609b0c"]]},{"id":"84c5a345.3a895","type":"inject","z":"86fb73e0.f92d","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":210,"y":290,"wires":[["c7cb2bfe.639b78"]]},{"id":"3b8a9dc8.db09d2","type":"ui_group","z":"","name":"Chart","tab":"9f15e1fa.4fc18","order":3,"disp":true,"width":"15","collapse":false},{"id":"9f15e1fa.4fc18","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Read more from document

[crankshaft]

@dceejay Thanks for helping.

Yes, that's what I have already started to do, but it gets complicated as I am saving and restoring the data from several charts and need to convert to mac address when saving and convert from mac address when loading and seems a very complicated way of achieving what a label does !

I also have the present value displayed using gauges, and the historical data for each gauge in a line chart, so there's lots of convert functions to add.