# How to create an horizontal stacked bar

**URL:** <https://discourse.nodered.org/t/how-to-create-an-horizontal-stacked-bar/45420>\
**Category:** Dashboard\
**Created:** [10 May 2021 09:10 UTC](https://discourse.nodered.org/t/how-to-create-an-horizontal-stacked-bar/45420 "2021-05-10T09:10:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Student00](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Student00](https://discourse.nodered.org/u/Student00)\
**Post date:** [10 May 2021 09:10 UTC](https://discourse.nodered.org/t/how-to-create-an-horizontal-stacked-bar/45420/1 "2021-05-10T09:10:18Z")

</div>

Hello, I've briefly seen that it was possible to create horizontal bar chart using the node ui\_chart, although I don't know about stacked chart. The problem is that I have no clue about how to do it.

Here are examples of what I would like to do:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/94a5f08d71feff2212edcb837289662409634a3f.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66de72995806d395b98408955a0f481f0d0a281a.png)

Thanks in advances!

---

<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:** [10 May 2021 09:47 UTC](https://discourse.nodered.org/t/how-to-create-an-horizontal-stacked-bar/45420/2 "2021-05-10T09:47:51Z")

</div>

Here is a little example

```auto
[{"id":"a9b523ce.0acde","type":"function","z":"c9512783.9493c8","name":"ui_control","func":"\nmsg.ui_control = {\n options: {\n scales: {\n xAxes: [\n {\n stacked: true,\n ticks: {\n fontColor: '#00ff00'\n },\n gridLines :{\n zeroLineColor:'#00ff00',\n color:'#00ff00',\n lineWidth:0.5\n },\n }\n],\n yAxes: [{\n stacked: true,\n ticks: {\n fontColor: '#ffff00'\n },\n gridLines :{\n zeroLineColor:'#00ff00',\n color:'#00ff00',\n lineWidth:0.5\n },\n }]\n }\n }\n}\n\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":420,"wires":[["364f1246.5ba72e"]]},{"id":"21056f95.203bf","type":"inject","z":"c9512783.9493c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":130,"y":420,"wires":[["a9b523ce.0acde","146a4606.6cd3aa"]]},{"id":"364f1246.5ba72e","type":"ui_chart","z":"c9512783.9493c8","name":"","group":"65dfd687.bc39a8","order":0,"width":0,"height":0,"label":"chart","chartType":"horizontalBar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":670,"y":420,"wires":[[]]},{"id":"41a3820a.7356fc","type":"function","z":"c9512783.9493c8","name":"chart data","func":"msg.payload = [{\n \"series\": [\"X\", \"Y\", \"Z\"],\n \"data\": [[5,6,9,10], [3,8,5,11], [6,7,2,12] ],\n \"labels\": [\"Jan\", \"Feb\", \"Mar\", \"Apr\"]\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":460,"wires":[["364f1246.5ba72e"]]},{"id":"146a4606.6cd3aa","type":"delay","z":"c9512783.9493c8","name":"","pauseType":"delay","timeout":"40","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":310,"y":460,"wires":[["41a3820a.7356fc"]]},{"id":"65dfd687.bc39a8","type":"ui_group","name":"Default","tab":"5394d338.3dd19c","order":1,"disp":true,"width":"6","collapse":false},{"id":"5394d338.3dd19c","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Student00](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Student00](https://discourse.nodered.org/u/Student00)\
**Post date:** [10 May 2021 14:08 UTC](https://discourse.nodered.org/t/how-to-create-an-horizontal-stacked-bar/45420/3 "2021-05-10T14:08:16Z")

</div>

Thank you for your answer it was quite what I was looking for and I managed to create what I wanted with your code.

> Do you also know a way for me to get rid of the numbers at the bottom in order to make the chart look cleaner

Nevermind about this I found a way to do this  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3a5c0271c373b757707d294f8ef192dd7195eba7.png)  
Also is it possible to write text directly (pourcentage) into the chart like in the first image I posted in this thread for exemple.

---

<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:** [10 May 2021 14:22 UTC](https://discourse.nodered.org/t/how-to-create-an-horizontal-stacked-bar/45420/4 "2021-05-10T14:22:45Z")

</div>

To get rid of axes just add `display:false` for axis configuration

```auto

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

```

To show numbers on top of bars, that takes to have access to the chart object which is impossible in case of ui\_chart node is used.  
It is possible to use ui\_template node and create the chart using bare chartjs library and then you have access and can add pluggble functions.

---

<div class="post-metadata">

**Author:** ![Student00](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Student00](https://discourse.nodered.org/u/Student00)\
**Post date:** [11 May 2021 06:12 UTC](https://discourse.nodered.org/t/how-to-create-an-horizontal-stacked-bar/45420/5 "2021-05-11T06:12:22Z")

</div>

I see, well thank you for your help!

---

<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:** [25 May 2021 06:13 UTC](https://discourse.nodered.org/t/how-to-create-an-horizontal-stacked-bar/45420/6 "2021-05-25T06:13:11Z")

</div>

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