# Chart options: mixed charts and bars and multi axes

**URL:** <https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814>\
**Category:** FAQs\
**Created:** [30 April 2020 12:24 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814 "2020-04-30T12:24:18Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rwmingis](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rwmingis/32/19479_2.png) [@rwmingis](https://discourse.nodered.org/u/rwmingis)\
**Post date:** [30 April 2020 12:24 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/1 "2020-04-30T12:24:18Z")

</div>

Does anyone have a good example how to add attributes to the different datasets going to a chart. I have seen how to add a second y axes to a chart, but I don't know how to tell the chart on which axis to put which series. Example here which works:

> [@Dashboard Chart different Y Axis per Topic](https://discourse.nodered.org/t/dashboard-chart-different-y-axis-per-topic/21258):
>
> Hello Gentlemen, May I know if it is possible to make our Dashboard Chart having different YAxis per topic? I have 2 topics that has a big difference on the values, and my chart doesn't look good for that. That is why I am asking if possible to make two YAxis for each topic?. Thanks ! Regards

On that same point in chart.js, you can set each series type property to 'bar' or 'line' even if it is on the other kind of chart to have mixed charts like here:

> **[Mixed Chart Types | Chart.js](https://www.chartjs.org/docs/latest/charts/mixed.html)**
>
> Open source HTML5 Charts for your website

I just can't figure out how to add that property to the dataset.

Does anyone have a clue or an alternative.

For reference, I am trying to show the hourly rainfall with a bargraph and the daily accumulation with a line graph overlayed. Works great in excel like this.

Cheers,

Rob

---

<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:** [30 April 2020 13:04 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/2 "2020-04-30T13:04:24Z")

</div>

You cant do it with regular chart node, but it is possible with ui\_template. Quick example.

```auto
[{"id":"13e0b8f1.dfe687","type":"ui_template","z":"b633308d.4a91a","group":"4552fe72.fdfa5","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":690,"y":700,"wires":[[]]},{"id":"33be001d.f6af3","type":"inject","z":"b633308d.4a91a","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"0.62","x":250,"y":700,"wires":[["167e0e6d.2acf32"]]},{"id":"167e0e6d.2acf32","type":"function","z":"b633308d.4a91a","name":"","func":"\nvar m_first = []\nvar m_second = []\nvar m_labels = []\nvar a\nvar startTime = 1577836800000\nfor(x=1;x<=25;x++){\n a = {x: new Date(startTime), y: Math.random() * 300}\n m_first.push(a)\n startTime += 86400000\n}\nstartTime = 1577836800000\nfor(x=1;x<=25;x++){\n a = -2.5 + Math.random() * 5\n m_second.push(a)\n startTime += 86400000\n m_labels.push(\"label_\"+x)\n}\n\nmsg.payload = {}\nmsg.payload.first = JSON.stringify(m_first)\nmsg.payload.second = JSON.stringify(m_second)\nmsg.payload.labels = JSON.stringify(m_labels)\nreturn msg;\n","outputs":1,"noerr":0,"x":390,"y":700,"wires":[["7f227cac.38d054"]]},{"id":"807a85c.8761e78","type":"debug","z":"b633308d.4a91a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":670,"y":740,"wires":[]},{"id":"7f227cac.38d054","type":"template","z":"b633308d.4a91a","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']\n\nvar ctx = document.getElementById('myChart').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: 'First',\n backgroundColor: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.first}}},\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 1\n },\n {\n type:'bar',\n label: 'Second',\n \n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.second}}},\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: 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 \n ticks: {\n fontColor:textcolor\n }\n }\n]\n }\n }\n});\n</script>\n","output":"str","x":520,"y":700,"wires":[["13e0b8f1.dfe687","807a85c.8761e78"]]},{"id":"4552fe72.fdfa5","type":"ui_group","z":"","name":"Chart","tab":"2ecb90e3.af7a5","order":3,"disp":true,"width":"15","collapse":false},{"id":"2ecb90e3.af7a5","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

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

---

<div class="post-metadata">

**Author:** ![rwmingis](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rwmingis/32/19479_2.png) [@rwmingis](https://discourse.nodered.org/u/rwmingis)\
**Post date:** [30 April 2020 19:21 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/3 "2020-04-30T19:21:10Z")

</div>

And boom, there it is. Thanks hotNipi, you've just saved me hours of mucking around, but now I'm on a whole new graphing tangent! 🤓

Cheers!

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [30 April 2020 19:35 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/4 "2020-04-30T19:35:23Z")

</div>

> [@hotNipi](#):
>
> You cant do it with regular chart node, but it is possible with ui\_template

Wow! that is a great example, definitely one for me to bookmark.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [1 May 2020 03:32 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/5 "2020-05-01T03:32:00Z")

</div>

> [@hotNipi](#):
>
> Quick example

The Wizard of charting 🧙

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [3 May 2020 10:17 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/6 "2020-05-03T10:17:58Z")

</div>

Are there a way of making the fill option more opaque? As if you make fill: true it's rather solid

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

Opaque like below  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c2f182adf22d5ffbae6e384e1053aec60740f5f8.png)

---

<div class="post-metadata">

**Author:** ![rwmingis](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rwmingis/32/19479_2.png) [@rwmingis](https://discourse.nodered.org/u/rwmingis)\
**Post date:** [3 May 2020 11:04 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/7 "2020-05-03T11:04:28Z")

</div>

The way I understand it, once you are in the template node, you are back to regular html, JavaScript, etc. So standard chart.js formatting should work, eg: [https://codepen.io/rtd62/pen/NpZvQj](https://codepen.io/rtd62/pen/NpZvQj)

---

<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:** [3 May 2020 12:03 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/8 "2020-05-03T12:03:34Z")

</div>

That fill color is currently same as the line color, that why it is not semitransparent.  
Property to set is `backgroundColor`  
For that dataset just change color to be with alpha channel adjusted

```auto
{
                type:'line',
                label: 'First',
                backgroundColor: '#00990055',
                borderColor: linecolors[0],
                data: {{{payload.first}}},
                yAxisID: 'left-y-axis',
                steppedLine: false,
                fill: true,
                borderWidth: 1
            }

```

---

<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:** [17 May 2020 12:03 UTC](https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/9 "2020-05-17T12:03:41Z")

</div>

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