Stacked Bars Chart with msg.ui_control

[Robertotarga]

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 :

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:

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:

[{"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}]

[hotNipi]

You can change those colors easily.

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;

[dceejay]

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

[Robertotarga]

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.

[Robertotarga]

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?

[hotNipi]

I'm using documents of the 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.

[Robertotarga]

Ok, mano thanks