# Mixed Charts in chartjs - showing more than 2 data series

**URL:** <https://discourse.nodered.org/t/mixed-charts-in-chartjs-showing-more-than-2-data-series/56419>\
**Category:** Dashboard\
**Tags:** chart\
**Created:** [10 January 2022 19:24 UTC](https://discourse.nodered.org/t/mixed-charts-in-chartjs-showing-more-than-2-data-series/56419 "2022-01-10T19:24:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [10 January 2022 19:25 UTC](https://discourse.nodered.org/t/mixed-charts-in-chartjs-showing-more-than-2-data-series/56419/1 "2022-01-10T19:25:00Z")

</div>

Hi - I'm attempting to plot 4 datasets (3 bar, 1 line) using chartjs and the sample code from @hotNipi in this topic  
[https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/6](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/6).

I can get one bar chart and one line chart to display, but when I enable the other series, the chart stops working.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/86398f83b7750584d0c7df8b0e2418b61afe6268.jpeg)

Below is the sample flow with the data. NOTE: In the "template" node, the mapping for the other data series (solar and battery) has been commented out.

```auto
[{"id":"5eae0de8.c2547c","type":"function","z":"506d369f.7aad98","name":"Create Chart Arrays","func":"var arrayLength = msg.payload.length;\n\n\nvar home=[]\nvar grid=[]\nvar solar=[]\nvar battery=[]\nvar labels = []\nvar localDt =new Date()\n\n\nfor (var i = 0; i < arrayLength; i++) \n{\n home[i] = {\n x: msg.payload[i].created,\n y: msg.payload[i].home\n }\n \n grid[i] = msg.payload[i].grid\n /* { x: msg.payload[i].created,\n y: msg.payload[i].grid\n }*/\n \n solar[i] = msg.payload[i].solar\n /*{\n x: msg.payload[i].epochTime,\n y: msg.payload[i].solar\n }*/\n \n battery[i] = msg.payload[i].battery\n /*{\n x: msg.payload[i].epochTime,\n y: msg.payload[i].battery\n }\n */\n \n localDt = msg.payload[i].created\n labels[i] = localDt.toLocaleString()\n /* { x: msg.payload[i].created,\n y: msg.payload[i].grid\n }*/\n}\n\ndelete msg.payload;\n\nmsg.home = JSON.stringify(home);\nmsg.grid = JSON.stringify(grid);\nmsg.labels = JSON.stringify(labels);\nmsg.solar = JSON.stringify(solar);\nmsg.battery = JSON.stringify(battery);\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":582.6665649414062,"y":2798.0003662109375,"wires":[["48dff044.4e20f8"]]},{"id":"48dff044.4e20f8","type":"change","z":"506d369f.7aad98","name":"Set Data","rules":[{"t":"set","p":"payload.labels","pt":"msg","to":"labels","tot":"msg"},{"t":"set","p":"payload.home","pt":"msg","to":"home","tot":"msg"},{"t":"set","p":"payload.grid","pt":"msg","to":"grid","tot":"msg"},{"t":"set","p":"payload.solar","pt":"msg","to":"solar","tot":"msg"},{"t":"set","p":"payload.battery","pt":"msg","to":"battery","tot":"msg"},{"t":"delete","p":"labels","pt":"msg"},{"t":"delete","p":"home","pt":"msg"},{"t":"delete","p":"grid","pt":"msg"},{"t":"delete","p":"solar","pt":"msg"},{"t":"delete","p":"battery","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":774.3333129882812,"y":2796.666748046875,"wires":[["8654012a.dfffb"]]},{"id":"8654012a.dfffb","type":"template","z":"506d369f.7aad98","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart2\" 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');\n//var linecolors = ['#009900','#889900']\nvar linecolors = ['#009900','#ffa500']\n\nvar ctx = document.getElementById('myChart2').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 //labels: '',\n datasets: [\n {\n type:'line',\n label: 'Home',\n backgroundColor: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.home}}},\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 3\n },\n {\n type:'bar',\n label: 'Grid',\n \n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.grid}}},\n yAxisID: 'left-y-axis',\n barPercentage: 0.5,\n barThickness: 2,\n maxBarThickness: 2,\n minBarLength: 2,\n }\n /*{\n type:'bar',\n label: 'Solar',\n \n backgroundColor: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.solar}}},\n yAxisID: 'right-y-axis',\n barPercentage: 0.5,\n barThickness: 2,\n maxBarThickness: 2,\n minBarLength: 2,\n }\n {\n type:'bar',\n label: 'Battery',\n \n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.battery}}},\n yAxisID: 'right-y-axis',\n barPercentage: 0.5,\n barThickness: 6,\n maxBarThickness: 8,\n minBarLength: 2,\n }*/\n ]\n },\n\n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n fontColor: textcolor\n }\n },\n {\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 }\n }\n],\n xAxes: [\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n //type: 'timeseries',\n ticks: {\n fontColor:textcolor\n }\n }\n]\n }\n }\n});\n</script>\n","output":"str","x":937.6665954589844,"y":2796.000244140625,"wires":[["f9934ae3.096548"]]},{"id":"f9934ae3.096548","type":"ui_template","z":"506d369f.7aad98","group":"d12c839.d7254","name":"Line Chart Solar","order":1,"width":"26","height":"20","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1139.6665954589844,"y":2795.000244140625,"wires":[[]]},{"id":"42e24046.96964","type":"inject","z":"506d369f.7aad98","name":"Inject data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"home\":622,\"grid\":622,\"solar\":-10,\"battery\":0,\"epochTime\":1641708000000,\"created\":\"2022-01-09T06:00:00.000Z\"},{\"home\":605.25,\"grid\":630,\"solar\":-10,\"battery\":-20,\"epochTime\":1641708300000,\"created\":\"2022-01-09T06:05:00.000Z\"},{\"home\":606.25,\"grid\":619,\"solar\":0,\"battery\":-10,\"epochTime\":1641708600000,\"created\":\"2022-01-09T06:10:00.000Z\"},{\"home\":637.25,\"grid\":630,\"solar\":0,\"battery\":0,\"epochTime\":1641708900000,\"created\":\"2022-01-09T06:15:00.000Z\"},{\"home\":617.25,\"grid\":622,\"solar\":0,\"battery\":-10,\"epochTime\":1641709200000,\"created\":\"2022-01-09T06:20:00.000Z\"},{\"home\":621,\"grid\":619,\"solar\":0,\"battery\":-20,\"epochTime\":1641709500000,\"created\":\"2022-01-09T06:25:00.000Z\"},{\"home\":631,\"grid\":623,\"solar\":-10,\"battery\":30,\"epochTime\":1641709800000,\"created\":\"2022-01-09T06:30:00.000Z\"},{\"home\":630.25,\"grid\":619,\"solar\":0,\"battery\":0,\"epochTime\":1641710100000,\"created\":\"2022-01-09T06:35:00.000Z\"},{\"home\":653.75,\"grid\":679,\"solar\":-10,\"battery\":-10,\"epochTime\":1641710400000,\"created\":\"2022-01-09T06:40:00.000Z\"},{\"home\":657.5,\"grid\":669,\"solar\":-10,\"battery\":0,\"epochTime\":1641710700000,\"created\":\"2022-01-09T06:45:00.000Z\"},{\"home\":720,\"grid\":726,\"solar\":-20,\"battery\":10,\"epochTime\":1641711000000,\"created\":\"2022-01-09T06:50:00.000Z\"},{\"home\":730.25,\"grid\":779,\"solar\":0,\"battery\":-30,\"epochTime\":1641711300000,\"created\":\"2022-01-09T06:55:00.000Z\"},{\"home\":717,\"grid\":733,\"solar\":-20,\"battery\":0,\"epochTime\":1641711600000,\"created\":\"2022-01-09T07:00:00.000Z\"},{\"home\":720.25,\"grid\":743,\"solar\":-10,\"battery\":10,\"epochTime\":1641711900000,\"created\":\"2022-01-09T07:05:00.000Z\"},{\"home\":750.25,\"grid\":741,\"solar\":0,\"battery\":-10,\"epochTime\":1641712200000,\"created\":\"2022-01-09T07:10:00.000Z\"},{\"home\":719.5,\"grid\":728,\"solar\":-10,\"battery\":-20,\"epochTime\":1641712500000,\"created\":\"2022-01-09T07:15:00.000Z\"},{\"home\":731.25,\"grid\":730,\"solar\":-10,\"battery\":-10,\"epochTime\":1641712800000,\"created\":\"2022-01-09T07:20:00.000Z\"},{\"home\":688.25,\"grid\":712,\"solar\":-20,\"battery\":-20,\"epochTime\":1641713100000,\"created\":\"2022-01-09T07:25:00.000Z\"},{\"home\":718.5,\"grid\":726,\"solar\":-10,\"battery\":-30,\"epochTime\":1641713400000,\"created\":\"2022-01-09T07:30:00.000Z\"},{\"home\":699,\"grid\":715,\"solar\":-20,\"battery\":0,\"epochTime\":1641713700000,\"created\":\"2022-01-09T07:35:00.000Z\"}]","payloadType":"json","x":359.3333435058594,"y":2795,"wires":[["5eae0de8.c2547c"]]},{"id":"d12c839.d7254","type":"ui_group","name":"Chart","tab":"2ecb90e3.af7a5","order":3,"disp":true,"width":"26","collapse":false},{"id":"2ecb90e3.af7a5","type":"ui_tab","name":"Solar","icon":"fa-sun-o","order":1,"disabled":false,"hidden":false}]

```

Any help or guidance would be appreciated. Thanks.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 January 2022 20:23 UTC](https://discourse.nodered.org/t/mixed-charts-in-chartjs-showing-more-than-2-data-series/56419/2 "2022-01-10T20:23:34Z")

</div>

This should get you close....

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

Flow...

```auto
[{"id":"5eae0de8.c2547c","type":"function","z":"af952aeaa20f4f97","name":"Create Chart Arrays","func":"const data = msg.payload;\nconst dataLength = data.length;\n\nconst home=[]\nconst grid=[]\nconst solar=[]\nconst battery=[]\nconst labels = []\n\nfor (var i = 0; i < dataLength; i++) {\n const localDt = new Date(data[i].created)\n labels[i] = localDt.toLocaleString()\n home[i] = {\n x: data[i].created,\n y: data[i].home\n }\n grid[i] = data[i].grid\n solar[i] = data[i].solar\n battery[i] = data[i].battery\n}\n\nmsg.payload = {\n labels: JSON.stringify(labels),\n home: JSON.stringify(home),\n grid: JSON.stringify(grid),\n solar: JSON.stringify(solar),\n battery: JSON.stringify(battery),\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":510,"y":980,"wires":[["8654012a.dfffb"]]},{"id":"8654012a.dfffb","type":"template","z":"af952aeaa20f4f97","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart2\" 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','#ffa500','#aaff00','#00ffaa']\n\nvar ctx = document.getElementById('myChart2').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:'line',\n label: 'Home',\n backgroundColor: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.home}}},\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 3\n }, {\n type:'bar',\n label: 'Grid', \n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.grid}}},\n yAxisID: 'left-y-axis',\n barPercentage: 0.5,\n barThickness: 2,\n maxBarThickness: 2,\n minBarLength: 2,\n }, {\n type:'bar',\n label: 'Solar', \n backgroundColor: linecolors[2],\n borderColor: linecolors[2],\n data: {{{payload.solar}}},\n yAxisID: 'right-y-axis',\n barPercentage: 0.5,\n barThickness: 2,\n maxBarThickness: 2,\n minBarLength: 2,\n }, {\n type:'bar',\n label: 'Battery', \n backgroundColor: linecolors[3],\n borderColor: linecolors[3],\n data: {{{payload.battery}}},\n yAxisID: 'right-y-axis',\n barPercentage: 0.5,\n barThickness: 6,\n maxBarThickness: 8,\n minBarLength: 2,\n }\n ]\n },\n\n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\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 }\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 gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n ticks: {\n fontColor:textcolor\n }\n }\n]\n }\n }\n});\n</script>\n","output":"str","x":700,"y":980,"wires":[["f9934ae3.096548"]]},{"id":"f9934ae3.096548","type":"ui_template","z":"af952aeaa20f4f97","group":"d12c839.d7254","name":"Line Chart Solar","order":1,"width":"26","height":"20","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":880,"y":980,"wires":[[]]},{"id":"42e24046.96964","type":"inject","z":"af952aeaa20f4f97","name":"Inject data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"home\":622,\"grid\":622,\"solar\":-10,\"battery\":0,\"epochTime\":1641708000000,\"created\":\"2022-01-09T06:00:00.000Z\"},{\"home\":605.25,\"grid\":630,\"solar\":-10,\"battery\":-20,\"epochTime\":1641708300000,\"created\":\"2022-01-09T06:05:00.000Z\"},{\"home\":606.25,\"grid\":619,\"solar\":0,\"battery\":-10,\"epochTime\":1641708600000,\"created\":\"2022-01-09T06:10:00.000Z\"},{\"home\":637.25,\"grid\":630,\"solar\":0,\"battery\":0,\"epochTime\":1641708900000,\"created\":\"2022-01-09T06:15:00.000Z\"},{\"home\":617.25,\"grid\":622,\"solar\":0,\"battery\":-10,\"epochTime\":1641709200000,\"created\":\"2022-01-09T06:20:00.000Z\"},{\"home\":621,\"grid\":619,\"solar\":0,\"battery\":-20,\"epochTime\":1641709500000,\"created\":\"2022-01-09T06:25:00.000Z\"},{\"home\":631,\"grid\":623,\"solar\":-10,\"battery\":30,\"epochTime\":1641709800000,\"created\":\"2022-01-09T06:30:00.000Z\"},{\"home\":630.25,\"grid\":619,\"solar\":0,\"battery\":0,\"epochTime\":1641710100000,\"created\":\"2022-01-09T06:35:00.000Z\"},{\"home\":653.75,\"grid\":679,\"solar\":-10,\"battery\":-10,\"epochTime\":1641710400000,\"created\":\"2022-01-09T06:40:00.000Z\"},{\"home\":657.5,\"grid\":669,\"solar\":-10,\"battery\":0,\"epochTime\":1641710700000,\"created\":\"2022-01-09T06:45:00.000Z\"},{\"home\":720,\"grid\":726,\"solar\":-20,\"battery\":10,\"epochTime\":1641711000000,\"created\":\"2022-01-09T06:50:00.000Z\"},{\"home\":730.25,\"grid\":779,\"solar\":0,\"battery\":-30,\"epochTime\":1641711300000,\"created\":\"2022-01-09T06:55:00.000Z\"},{\"home\":717,\"grid\":733,\"solar\":-20,\"battery\":0,\"epochTime\":1641711600000,\"created\":\"2022-01-09T07:00:00.000Z\"},{\"home\":720.25,\"grid\":743,\"solar\":-10,\"battery\":10,\"epochTime\":1641711900000,\"created\":\"2022-01-09T07:05:00.000Z\"},{\"home\":750.25,\"grid\":741,\"solar\":0,\"battery\":-10,\"epochTime\":1641712200000,\"created\":\"2022-01-09T07:10:00.000Z\"},{\"home\":719.5,\"grid\":728,\"solar\":-10,\"battery\":-20,\"epochTime\":1641712500000,\"created\":\"2022-01-09T07:15:00.000Z\"},{\"home\":731.25,\"grid\":730,\"solar\":-10,\"battery\":-10,\"epochTime\":1641712800000,\"created\":\"2022-01-09T07:20:00.000Z\"},{\"home\":688.25,\"grid\":712,\"solar\":-20,\"battery\":-20,\"epochTime\":1641713100000,\"created\":\"2022-01-09T07:25:00.000Z\"},{\"home\":718.5,\"grid\":726,\"solar\":-10,\"battery\":-30,\"epochTime\":1641713400000,\"created\":\"2022-01-09T07:30:00.000Z\"},{\"home\":699,\"grid\":715,\"solar\":-20,\"battery\":0,\"epochTime\":1641713700000,\"created\":\"2022-01-09T07:35:00.000Z\"}]","payloadType":"json","x":320,"y":980,"wires":[["5eae0de8.c2547c"]]},{"id":"d12c839.d7254","type":"ui_group","name":"Chart","tab":"2ecb90e3.af7a5","order":3,"disp":true,"width":"26","collapse":false},{"id":"2ecb90e3.af7a5","type":"ui_tab","name":"Solar","icon":"fa-sun-o","order":1,"disabled":false,"hidden":false}]

```

Output...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d81e060374c79fe40af04db15c0d1fe3680f4dae.png)

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [10 January 2022 20:58 UTC](https://discourse.nodered.org/t/mixed-charts-in-chartjs-showing-more-than-2-data-series/56419/3 "2022-01-10T20:58:43Z")

</div>

> [@Steve-Mcl](#):
>
> This should get you close....

Thank you!!! That is exactly what I was trying to do. In comparing what I was doing (not working) vs what you did (working), I guess I was missing some commas in the dataset section or was it something else?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 January 2022 21:11 UTC](https://discourse.nodered.org/t/mixed-charts-in-chartjs-showing-more-than-2-data-series/56419/4 "2022-01-10T21:11:21Z")

</div>

There was a bit more to it than that. Look closer. You didn't specify the right y axis.

Also, the change node was overcomplicating things so I simplified the function node and removed the change node.

Lastly I added the extra line colours in the template.

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [13 January 2022 13:53 UTC](https://discourse.nodered.org/t/mixed-charts-in-chartjs-showing-more-than-2-data-series/56419/5 "2022-01-13T13:53:40Z")

</div>

> [@Steve-Mcl](#):
>
> There was a bit more to it than that.

Thank you for all your help. This is what it looks like now - could not have done it without your help  
🙏🏼

 ![Screen Shot 2022-01-13 at 7.51.16 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/432dac5279360f1108da67aeea549a82bf518923.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 January 2022 13:54 UTC](https://discourse.nodered.org/t/mixed-charts-in-chartjs-showing-more-than-2-data-series/56419/6 "2022-01-27T13:54:30Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.