Hello:
I am trying to use the "stack" option in a data set but I cannot seem to get it to work. When using the same settings in a codepen.io repository, it does exactly what I am trying to do using the template node.
Output from Node-RED template node:
What I would like to show is the "Tesla-From Grid" and "Tesla-To Grid" bars stacked together and the "Meter-From Grid" and "Meter-To Grid" stacked in a separate bar.
Output from Codepen sample:
This shows 4 datasets, first 2 are stacked together and the next 2 are also stacked together.
Link to codepen.io sample is https://codepen.io/rakgupta/pen/bGajwvj
The Node-RED flow with sample data is below:
[{"id":"344c1034bc5678b5","type":"inject","z":"3754dedec8d0e678","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"labels\":\"[\\\"2022-03-01\\\",\\\"2022-03-02\\\",\\\"2022-03-03\\\",\\\"2022-03-04\\\",\\\"2022-03-05\\\",\\\"2022-03-06\\\",\\\"2022-03-07\\\",\\\"2022-03-08\\\",\\\"2022-03-09\\\",\\\"2022-03-10\\\",\\\"2022-03-11\\\",\\\"2022-03-12\\\",\\\"2022-03-13\\\",\\\"2022-03-14\\\",\\\"2022-03-15\\\",\\\"2022-03-16\\\",\\\"2022-03-17\\\",\\\"2022-03-18\\\",\\\"2022-03-19\\\",\\\"2022-03-20\\\",\\\"2022-03-21\\\",\\\"2022-03-22\\\",\\\"2022-03-23\\\",\\\"2022-03-24\\\",\\\"2022-03-25\\\",\\\"2022-03-26\\\",\\\"2022-03-27\\\",\\\"2022-03-28\\\",\\\"2022-03-29\\\",\\\"2022-03-30\\\",\\\"2022-03-31\\\"]\",\"teslaFromGrid\":\"[0.159,0.175,0.191,12.954,13.988,24.628,12.85,39.299,27.158,0.51,50.938,27.191,1.767,10.8,1.561,0.137,0.14,0.189,0.13,0.142,28.274,11.447,9.528,0.172,0.138,0.139,0.141,1.384,11.477,7.592,0.179]\",\"meterFromGrid\":\"[0.175,0.199,0.23,12.957,14.044,24.639,12.93,39.269,27.188,0.582,50.925,27.22,1.79,10.896,1.661,0.181,0.216,0.299,0.144,0.177,28.308,11.457,9.585,0.226,0.166,0.151,0.162,1.441,11.533,7.667,0.218]\",\"teslaToGrid\":\"[-13.936,-6.378,-7.083,-0.017,-0.046,-0.007,-0.068,-0.019,-7.157,-11.995,-0.006,-11.228,-14.256,-0.066,-0.088,-17.365,-9.309,-4.519,-18.607,-20.433,-0.004,-0.019,-10.195,-10.206,-13.439,-19.206,-15.633,-11.803,-0.027,-1.742,-13.117]\",\"meterToGrid\":\"[-14.045,-6.507,-7.219,-0.065,-0.135,-0.018,-0.198,-0.039,-7.287,-12.113,-0.033,-11.313,-14.38,-0.198,-0.227,-17.546,-9.488,-4.705,-18.775,-20.65,-0.053,-0.096,-10.333,-10.367,-13.596,-19.406,-15.828,-11.987,-0.11,-1.86,-13.258]\"}","payloadType":"json","x":108.64704895019531,"y":198.9595489501953,"wires":[["e2f6af27.75bc4"]]},{"id":"e2f6af27.75bc4","type":"template","z":"3754dedec8d0e678","name":"Format Energy Chart","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChartTest\" width=600 height =180></canvas>\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']\nvar linecolors = ['#009900','#3fa9e9','#EEEB51','#E68C05']\nvar barPercent = .25\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 type:'bar',\n label: 'Meter - From Grid', \n backgroundColor: linecolors[1],\n stack: 'Stack1',\n borderColor: linecolors[1],\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: 'Tesla - To Grid', \n backgroundColor: linecolors[2],\n stack: 'Stack0',\n borderColor: linecolors[2],\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 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:false,\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: 'kW',\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: false,\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n ticks: {\n fontColor:textcolor,\n fontSize: 14,\n fontStyle:\"bold\",\n maxTicksLimit: 48,\n maxRotation: 90,\n minRotation:50\n },\n scaleLabel: {\n \t\t\t display: false,\n \t\t\t labelString: 'Time',\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 }\n});\n</script>\n","output":"str","x":348.8345642089844,"y":199.8235321044922,"wires":[["e8fe1a80.15bd68"]]},{"id":"e8fe1a80.15bd68","type":"ui_template","z":"3754dedec8d0e678","group":"197d0fb4.e354e8","name":"Tesla vs Meter","order":0,"width":"26","height":"8","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":582.5011596679688,"y":198.82381439208984,"wires":[[]]},{"id":"197d0fb4.e354e8","type":"ui_group","name":"Tesla vs Meter","tab":"58784d83.a5319c","order":8,"disp":true,"width":"26","collapse":false,"className":""},{"id":"58784d83.a5319c","type":"ui_tab","name":"Telsa Solar Detail","icon":"flare","order":3,"disabled":false,"hidden":false}]
Any help would be really appreciated. I've been struggling with this for a couple of days and I can't figure it out. Thanks for your help.
NR version: 1.3.5
OS: MacOS Catalina
