# Adding multiple series with different axis to chart

**URL:** https://discourse.nodered.org/t/adding-multiple-series-with-different-axis-to-chart/38591
**Category:** Dashboard
**Created:** [5 January 2021 13:01 UTC](https://discourse.nodered.org/t/adding-multiple-series-with-different-axis-to-chart/38591 "2021-01-05T13:01:05Z")
**Posts on this page:** 1
**Showing post:** 5

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [7 January 2021 08:39 UTC](https://discourse.nodered.org/t/adding-multiple-series-with-different-axis-to-chart/38591/5 "2021-01-07T08:39:32Z")

</div>

> [@Roaders](#):
>
> why it has been done this way

Because of native chart node is good for basic charting, but whenever you need to go beyond basics, the only possible way is to use the underlying `charjs` library directly. (Well you can use any JavaScript charting library you can find. I use same library the standard chart node uses because of most questions about how to do this or that can be solved with it. )

The `ui_template` node is here to give option to build something on top of ray JavaScript libraries.  
Using the `template` node to prepare and feed content to `ui_template` node just simplifies codding. That may not be true for everybody of course. The Mustache may be confusing if you haven't worked with it before and that is partially true even for me 🙂 . But why not to learn a bit.  
But of course same thing can be written into `ui_template` directly, just the data manipulation will be different.

> [@Roaders](#):
>
> how do I push data to the chart?

Example of handling live data:

```auto
[{"id":"26d66b9b.186034","type":"ui_template","z":"82bb9cb4.29b64","group":"304730.1de8e8d","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":710,"y":300,"wires":[[]]},{"id":"29e44bca.6d2594","type":"inject","z":"82bb9cb4.29b64","name":"","repeat":"5","crontab":"","once":false,"onceDelay":"0.62","topic":"","payload":"","payloadType":"date","x":350,"y":270,"wires":[["98fd0130.0550d"]]},{"id":"98fd0130.0550d","type":"function","z":"82bb9cb4.29b64","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":510,"y":270,"wires":[["26d66b9b.186034"]]},{"id":"55e9c5a5.e31f0c","type":"template","z":"82bb9cb4.29b64","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 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":500,"y":330,"wires":[["26d66b9b.186034"]]},{"id":"bf7ecf9e.8f61f","type":"inject","z":"82bb9cb4.29b64","name":"","repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":350,"y":330,"wires":[["55e9c5a5.e31f0c"]]},{"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}]

```

---

_[View the full topic](https://discourse.nodered.org/t/adding-multiple-series-with-different-axis-to-chart/38591)._