Hi:
I am migrating 3 charts (mixed - bar/line, stacked bar) from DB1 and I can’t get the first one to work (haven’t tried others). I was looking for examples using chart.js charts with DB2, but I could not find any. Are there any changes to how things work with chart.js now?
I don’t think the new chart node will do what I need,
Below is a sample flow. Hoping someone can help (I am not an expert in this - took a lot of trial and error to get it working in DB1!!!)
[{"id":"907f167420b82a97","type":"inject","z":"9fe89ce15b0f9a64","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"date\":\"2025-07-01\",\"teslaFromGrid\":15.554,\"meterFromGrid\":15.714,\"teslaToGrid\":-0.099,\"meterToGrid\":-0.166},{\"date\":\"2025-07-02\",\"teslaFromGrid\":34.8,\"meterFromGrid\":35.056,\"teslaToGrid\":-0.05,\"meterToGrid\":-0.093},{\"date\":\"2025-07-03\",\"teslaFromGrid\":40.65,\"meterFromGrid\":40.92,\"teslaToGrid\":-0.037,\"meterToGrid\":-0.082},{\"date\":\"2025-07-04\",\"teslaFromGrid\":18.36,\"meterFromGrid\":18.514,\"teslaToGrid\":-0.102,\"meterToGrid\":-0.171},{\"date\":\"2025-07-05\",\"teslaFromGrid\":23.608,\"meterFromGrid\":23.769,\"teslaToGrid\":-0.077,\"meterToGrid\":-0.155},{\"date\":\"2025-07-06\",\"teslaFromGrid\":23.436,\"meterFromGrid\":23.584,\"teslaToGrid\":-0.056,\"meterToGrid\":-0.093},{\"date\":\"2025-07-07\",\"teslaFromGrid\":46.696,\"meterFromGrid\":47.009,\"teslaToGrid\":-0.081,\"meterToGrid\":-0.118},{\"date\":\"2025-07-08\",\"teslaFromGrid\":17.878,\"meterFromGrid\":18.004,\"teslaToGrid\":-0.129,\"meterToGrid\":-0.175},{\"date\":\"2025-07-09\",\"teslaFromGrid\":24.112,\"meterFromGrid\":24.5,\"teslaToGrid\":-0.063,\"meterToGrid\":-0.137},{\"date\":\"2025-07-10\",\"teslaFromGrid\":29.684,\"meterFromGrid\":29.985,\"teslaToGrid\":-0.072,\"meterToGrid\":-0.177},{\"date\":\"2025-07-11\",\"teslaFromGrid\":44.976,\"meterFromGrid\":46.001,\"teslaToGrid\":-0.064,\"meterToGrid\":-0.218},{\"date\":\"2025-07-12\",\"teslaFromGrid\":40.658,\"meterFromGrid\":41.013,\"teslaToGrid\":-0.097,\"meterToGrid\":-0.248},{\"date\":\"2025-07-13\",\"teslaFromGrid\":3.526,\"meterFromGrid\":3.635,\"teslaToGrid\":-0.09,\"meterToGrid\":-0.224},{\"date\":\"2025-07-14\",\"teslaFromGrid\":28.55,\"meterFromGrid\":28.736,\"teslaToGrid\":-0.039,\"meterToGrid\":-0.105},{\"date\":\"2025-07-15\",\"teslaFromGrid\":30.548,\"meterFromGrid\":30.869,\"teslaToGrid\":-0.11,\"meterToGrid\":-0.201},{\"date\":\"2025-07-16\",\"teslaFromGrid\":44.488,\"meterFromGrid\":44.852,\"teslaToGrid\":-0.07,\"meterToGrid\":-0.154},{\"date\":\"2025-07-17\",\"teslaFromGrid\":28.566,\"meterFromGrid\":28.843,\"teslaToGrid\":-0.045,\"meterToGrid\":-0.1},{\"date\":\"2025-07-18\",\"teslaFromGrid\":54.282,\"meterFromGrid\":54.751,\"teslaToGrid\":-0.024,\"meterToGrid\":-0.068},{\"date\":\"2025-07-19\",\"teslaFromGrid\":13.648,\"meterFromGrid\":13.73,\"teslaToGrid\":-16.551,\"meterToGrid\":-16.757},{\"date\":\"2025-07-20\",\"teslaFromGrid\":0.928,\"meterFromGrid\":0.943,\"teslaToGrid\":-9.227,\"meterToGrid\":-9.393},{\"date\":\"2025-07-21\",\"teslaFromGrid\":4.604,\"meterFromGrid\":4.668,\"teslaToGrid\":-4.552,\"meterToGrid\":-4.664},{\"date\":\"2025-07-22\",\"teslaFromGrid\":6.062,\"meterFromGrid\":6.118,\"teslaToGrid\":-10.018,\"meterToGrid\":-10.154},{\"date\":\"2025-07-23\",\"teslaFromGrid\":6.962,\"meterFromGrid\":7.03,\"teslaToGrid\":-4.244,\"meterToGrid\":-4.358},{\"date\":\"2025-07-24\",\"teslaFromGrid\":6.876,\"meterFromGrid\":6.928,\"teslaToGrid\":-9.096,\"meterToGrid\":-9.246},{\"date\":\"2025-07-25\",\"teslaFromGrid\":5.488,\"meterFromGrid\":5.534,\"teslaToGrid\":-2.726,\"meterToGrid\":-2.804},{\"date\":\"2025-07-26\",\"teslaFromGrid\":7.96,\"meterFromGrid\":8.028,\"teslaToGrid\":-0.091,\"meterToGrid\":-0.162},{\"date\":\"2025-07-27\",\"teslaFromGrid\":39.938,\"meterFromGrid\":40.279,\"teslaToGrid\":-0.063,\"meterToGrid\":-0.113},{\"date\":\"2025-07-28\",\"teslaFromGrid\":36.71,\"meterFromGrid\":37.037,\"teslaToGrid\":-0.076,\"meterToGrid\":-0.122},{\"date\":\"2025-07-29\",\"teslaFromGrid\":46.704,\"meterFromGrid\":47.157,\"teslaToGrid\":-0.074,\"meterToGrid\":-0.126}]","payloadType":"json","x":274.6470642089844,"y":799.4576807022095,"wires":[["c5ba6cece81c92c0"]]},{"id":"c5ba6cece81c92c0","type":"template","z":"9fe89ce15b0f9a64","name":"Format Energy Chart","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChartTest\" width=1300 height =480></canvas>\n<script src=\"/Chart.bundle.min.js\"></script>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\n//var linecolors = ['#009900','#ffa500','#aaff00','#00ffaa']\n//var linecolors = ['#009900','#3fa9e9','#EEEB51','#E68C05']\nvar linecolors = ['#5FB404','#E68C05','#0489B1','#D7DF01']\nvar barPercent = 1\n\nvar ctx = document.getElementById('myChartTest').getContext('2d');\nvar chart = new Chart(ctx, {\n // The type of chart we want to create\n type: 'bar',\n\n // The data for our dataset\n data: {\n labels: {{{payload.labels}}},\n datasets: [\n {\n type:'bar',\n label: 'Tesla - From Grid',\n backgroundColor: linecolors[0],\n stack: 'Stack0',\n borderColor: linecolors[0],\n data: {{{payload.teslaFromGrid}}},\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 3,\n pointRadius: 0\n }, \n {\n type:'bar',\n label: 'Tesla - To Grid', \n backgroundColor: linecolors[1],\n stack: 'Stack0',\n borderColor: linecolors[1],\n data: {{{payload.teslaToGrid}}},\n yAxisID: 'left-y-axis',\n barPercentage: barPercent,\n barThickness: 1,\n borderWidth: 0,\n maxBarThickness: 2,\n minBarLength: 2,\n },\n {\n type:'bar',\n label: 'Meter - From Grid', \n backgroundColor: linecolors[2],\n stack: 'Stack1',\n borderColor: linecolors[2],\n data: {{{payload.meterFromGrid}}},\n yAxisID: 'left-y-axis',\n barPercentage: barPercent,\n barThickness: 1,\n borderWidth: 0,\n maxBarThickness: 2,\n minBarLength: 2,\n }, {\n type:'bar',\n label: 'Meter - To Grid', \n backgroundColor: linecolors[3],\n stack: 'Stack1',\n borderColor: linecolors[3],\n data: {{{payload.meterToGrid}}},\n yAxisID: 'left-y-axis',\n barPercentage: barPercent,\n borderWidth: 0,\n barThickness: 1,\n maxBarThickness: 2,\n minBarLength: 2,\n }\n ]\n },\n\n // Configuration options go here\n options: {\n legend: {\n display: true,\n position:\"bottom\",\n labels: {\n fontColor: textcolor,\n fontSize: 14,\n fontStyle:\"bold\"\n }\n },\n scales: {\n yAxes: [\n {\n stacked:true,\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n fontColor:textcolor,\n fontSize: 14,\n fontStyle:\"bold\"\n },\n scaleLabel: {\n \t\t\t display: true,\n \t\t\t labelString: 'kWh',\n \t\t\t fontColor:textcolor,\n fontSize: 16,\n fontStyle:\"bold\",\n }\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:textcolor\n }\n }*/\n ],\n xAxes: [\n {\n /*title: {\n text: 'Date and Time\n },*/\n stacked: true,\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n ticks: {\n fontColor:textcolor,\n fontSize: 14,\n fontStyle:\"bold\",\n maxTicksLimit: 31,\n maxRotation: 90,\n minRotation:90\n },\n scaleLabel: {\n \t\t\t display: false,\n \t\t\t labelString: 'Date',\n \t\t\t fontColor:textcolor,\n fontSize: 16,\n fontStyle:\"bold\",\n }\n }\n ]\n },\n plugins: {\n legend: {\n display: true,\n labels: {\n color: textcolor\n }\n },\n /*\n datalabels: {\n anchor: 'end',\n align: 'top',\n formatter: Math.round,\n font: {\n weight: 'bold'\n }\n }*/\n }\n }\n});\n</script>\n","output":"str","x":458.8345642089844,"y":799.8272094726562,"wires":[["72d8c95eee6c5357","d85a67a7156a9723"]]},{"id":"72d8c95eee6c5357","type":"debug","z":"9fe89ce15b0f9a64","name":"chart.js","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":606.8346710205078,"y":887.8271865844727,"wires":[]},{"id":"d85a67a7156a9723","type":"ui-template","z":"9fe89ce15b0f9a64","group":"","page":"","ui":"","name":"Line Chart Solar 2","order":1,"width":0,"height":0,"head":"","format":"","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":685.3051910400391,"y":801.4742212295532,"wires":[[]]}]
NOTE: I have not assigned a “group” to the template node in case it messed with anyone trying to import this flow.