# Stacked Bars Chart with msg.ui\_control

**URL:** <https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587>\
**Category:** Dashboard\
**Created:** [15 August 2020 15:54 UTC](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587 "2020-08-15T15:54:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robertotarga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertotarga/32/16890_2.png) [@Robertotarga](https://discourse.nodered.org/u/Robertotarga)\
**Post date:** [15 August 2020 15:54 UTC](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587/1 "2020-08-15T15:54:40Z")

</div>

I need to have a bar chart with stacked columns. Unfortunately this is not an option you can find in the configuration window (why?, it's a super standard bar chart style ), so I followed HotNipi's Feb. 10th post suggesting to use msg.ui\_control :

```auto
msg.ui_control = {
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
} 

```

It works, but it has some undesired side-effects, i.e. lettering is greyed, reference lines are black and so on, as you can see form the attached screenshot:

 ![barcharts](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/acfd85d04f0745b6d5434cbc65e07a847692eabe.jpeg)  
The problem is that, once you use msg.Ui\_control even with "stacked:false" you have no way to revert to the default behaviour. To have a default bar chart never use the msg.ui\_control in the setup function.

Where can I find the options to set the lettering colour and other "cosmetic" appearances?

Here is my testing flow:

```auto
[{"id":"6da19252.e0495c","type":"function","z":"461c9df1.6c1c94","name":"setup data","func":"\n\nvar dataseries1 =[10,15,20];\nvar dataseries2 =[5,8,13];\nvar data = [dataseries1,dataseries2];\nvar datalabels =[\"2018\",\"2019\",\"2020\"];\n\nvar chart = [{\n\"series\": [\"Production\", \"Consumption\"],\n\"data\": data,\n\"labels\": datalabels\n}];\n//msg.title = \"Side-By-Side Bars\";\n\nmsg.payload = chart;\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":200,"wires":[["f8f0c6c1.88afc8"]]},{"id":"f8f0c6c1.88afc8","type":"ui_chart","z":"461c9df1.6c1c94","name":"Bars","group":"6c744598.ccf8bc","order":3,"width":"7","height":"7","label":"","chartType":"bar","legend":"true","xformat":"HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"","removeOlder":"12","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":830,"y":160,"wires":[[]]},{"id":"6a3db5e0.92b2fc","type":"function","z":"461c9df1.6c1c94","name":"clear data","func":"\nmsg.payload = [];\nmsg.ui_control = {\n options: {\n scales: {\n xAxes: [{\n stacked: true\n }],\n yAxes: [{\n tacked: true\n }]\n }\n }\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":440,"y":60,"wires":[["f8f0c6c1.88afc8"]]},{"id":"62242a94.453e54","type":"ui_button","z":"461c9df1.6c1c94","name":"SidebySide Chart","group":"6c744598.ccf8bc","order":1,"width":0,"height":0,"passthru":false,"label":"Side-By-Side Bars","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":170,"y":200,"wires":[["8b9aa64b.6be378","cb05b3d9.de307"]]},{"id":"b48d6eb2.76c34","type":"function","z":"461c9df1.6c1c94","name":"setup data","func":"\n\nvar dataprod =[10,15,20];\nvar datacons =[5,8,13];\nvar data = [datacons,dataprod];\nvar datalabels =[\"2018\",\"2019\",\"2020\"];\n\nvar chart = [{\n\"series\": [\"Production\", \"Consumption\"],\n\"data\": data,\n\"labels\": datalabels\n}];\n\nmsg.payload = chart;\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":140,"wires":[["f8f0c6c1.88afc8"]]},{"id":"1f01b69.e40b449","type":"ui_button","z":"461c9df1.6c1c94","name":"Stacked Chart","group":"6c744598.ccf8bc","order":2,"width":0,"height":0,"passthru":false,"label":"Stacked Bars","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":160,"y":140,"wires":[["f7d09dcf.54459","6a3db5e0.92b2fc"]]},{"id":"8b9aa64b.6be378","type":"function","z":"461c9df1.6c1c94","name":"clear data","func":"\nmsg.payload = [];\nmsg.ui_control = {\n options: {\n scales: {\n xAxes: [{\n stacked: false\n }],\n yAxes: [{\n tacked: false\n }]\n }\n }\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":420,"y":280,"wires":[["f8f0c6c1.88afc8"]]},{"id":"cb05b3d9.de307","type":"delay","z":"461c9df1.6c1c94","name":"","pauseType":"delay","timeout":"100","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":370,"y":200,"wires":[["6da19252.e0495c"]]},{"id":"f7d09dcf.54459","type":"delay","z":"461c9df1.6c1c94","name":"","pauseType":"delay","timeout":"100","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":350,"y":140,"wires":[["b48d6eb2.76c34"]]},{"id":"bfa8d983.622a38","type":"ui_chart","z":"461c9df1.6c1c94","name":"Default Chart","group":"f2fbe3e0.a8092","order":2,"width":"7","height":"7","label":"default","chartType":"bar","legend":"true","xformat":"HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"auto","removeOlder":"12","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":830,"y":340,"wires":[[]]},{"id":"1302ca5b.df1b46","type":"function","z":"461c9df1.6c1c94","name":"setup data","func":"\n\nvar dataseries1 =[10,15,20];\nvar dataseries2 =[5,8,13];\nvar data = [dataseries1,dataseries2];\nvar datalabels =[\"2018\",\"2019\",\"2020\"];\n\nvar chart = [{\n\"series\": [\"Production\", \"Consumption\"],\n\"data\": data,\n\"labels\": datalabels\n}];\n//msg.title = \"Side-By-Side Bars\";\n\nmsg.payload = chart;\nreturn msg;","outputs":1,"noerr":0,"x":550,"y":340,"wires":[["bfa8d983.622a38"]]},{"id":"64fd9c3c.28c4e4","type":"ui_button","z":"461c9df1.6c1c94","name":"Default","group":"f2fbe3e0.a8092","order":1,"width":0,"height":0,"passthru":false,"label":"Default","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":140,"y":340,"wires":[["1302ca5b.df1b46"]]},{"id":"6c744598.ccf8bc","type":"ui_group","z":"","name":"template1","tab":"5f806182.bf90a","order":1,"disp":false,"width":"7","collapse":false},{"id":"f2fbe3e0.a8092","type":"ui_group","z":"","name":"template2","tab":"5f806182.bf90a","order":2,"disp":false,"width":7,"collapse":false},{"id":"5f806182.bf90a","type":"ui_tab","z":"","name":"prova tavole-template","icon":"dashboard","order":6,"disabled":false,"hidden":false}]

```

---

<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:** [15 August 2020 16:29 UTC](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587/2 "2020-08-15T16:29:31Z")

</div>

You can change those colors easily.

```auto
msg.payload = [];
msg.ui_control = {
    options: {
        scales: {
            xAxes: [
                {
                stacked: true,
                ticks: {
                    fontColor: '#00ff00'
                },
                gridLines :{
                    zeroLineColor:'#00ff00',
                    color:'#00ff00',
                    lineWidth:0.5
                },
            }
            ],
            yAxes: [{
                stacked: true,
                ticks: {
                    fontColor: '#ffff00'
                },
                gridLines :{
                    zeroLineColor:'#00ff00',
                    color:'#00ff00',
                    lineWidth:0.5
                },
            }]
        }
    }
}

return msg;

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 August 2020 17:07 UTC](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587/3 "2020-08-15T17:07:13Z")

</div>

Do you need to stack both dimensions? I think you may only need x

---

<div class="post-metadata">

**Author:** ![Robertotarga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertotarga/32/16890_2.png) [@Robertotarga](https://discourse.nodered.org/u/Robertotarga)\
**Post date:** [15 August 2020 17:19 UTC](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587/4 "2020-08-15T17:19:22Z")

</div>

Hi dceejay,  
thank you for your post.  
Conceptually you would need to stack Y axis only, but if you leave X axis stacked= false the series columns do not align perfectly vertically, but have a small weird horizontal shift, so you have to declare X axis stacked=true as well to get what you expect from a stacked bar chart.

 ![Schermata 2020-08-15 alle 19.17.18](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad2eaef0a842ab5d1e142dce45f3983fb1d5c6ad.png)

---

<div class="post-metadata">

**Author:** ![Robertotarga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertotarga/32/16890_2.png) [@Robertotarga](https://discourse.nodered.org/u/Robertotarga)\
**Post date:** [15 August 2020 17:22 UTC](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587/5 "2020-08-15T17:22:21Z")

</div>

Hi hotNiPi,  
thank you very much for your useful post.  
BTW can you please point me to the doc explaining all the features of the chart using msg.ui\_control tecnique?

---

<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:** [15 August 2020 17:30 UTC](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587/6 "2020-08-15T17:30:29Z")

</div>

I'm using documents of the [https://www.chartjs.org/docs/latest/](https://www.chartjs.org/docs/latest/) but thing to realize is that dashboard doesn't use the latest version so many things even are not supported or may work a little bit differently. Luckily the basics are same so the document helps a lot.

---

<div class="post-metadata">

**Author:** ![Robertotarga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertotarga/32/16890_2.png) [@Robertotarga](https://discourse.nodered.org/u/Robertotarga)\
**Post date:** [15 August 2020 18:01 UTC](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587/7 "2020-08-15T18:01:28Z")

</div>

Ok, mano thanks

---

<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:** [14 September 2020 18:01 UTC](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587/8 "2020-09-14T18:01:31Z")

</div>

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