# Dashboard - have gauges shown horizontally

**URL:** <https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852>\
**Category:** General\
**Created:** [4 September 2018 20:34 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852 "2018-09-04T20:34:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![nodecentral](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodecentral/32/10432_2.png) [@nodecentral](https://discourse.nodered.org/u/nodecentral)\
**Post date:** [4 September 2018 20:34 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/1 "2018-09-04T20:34:42Z")

</div>

I’m sure I’m missing something obvious, but when I add gauges to my dashboard they are placed one above the other, in a column, how do I get them to go/appear horizontally?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [4 September 2018 20:43 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/2 "2018-09-04T20:43:23Z")

</div>

It's all a matter of setting the widths of the widgets and groups they are placed in.

For example, if you place two 6-unit-wide gauges in a group that is also 6-units wide (the default), then they will be forced to stack one about the other.

But if you set the group width to 12-units, then you'll be able to fit two 6-unit-wide gauges horizontally before it wraps to a second row.

---

<div class="post-metadata">

**Author:** ![nodecentral](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodecentral/32/10432_2.png) [@nodecentral](https://discourse.nodered.org/u/nodecentral)\
**Post date:** [6 September 2018 22:16 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/3 "2018-09-06T22:16:47Z")

</div>

Hi,

Looking at the details, currently the gauge size is set to default which is ‘auto’ and the group size is indeed 6, so is auto supposed to something special - or is it just defaulting to 6 anyway hence the gauges are stacking up?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 September 2018 22:19 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/4 "2018-09-06T22:19:44Z")

</div>

Auto fills the horizontal space in the group.

---

<div class="post-metadata">

**Author:** ![nodecentral](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodecentral/32/10432_2.png) [@nodecentral](https://discourse.nodered.org/u/nodecentral)\
**Post date:** [6 September 2018 22:23 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/5 "2018-09-06T22:23:39Z")

</div>

Ok, thanks but just to be clear, looking at your suggestion I need to change the size of my gauge from auto to 6 ? And then update the size of my group to 12 ?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 September 2018 22:25 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/6 "2018-09-06T22:25:24Z")

</div>

if you set the group to 12, and have two widgets with a width of 6, they will show side by side depending on the width of the browser. If you fix the group width to 6 then they will be one under the other.

---

<div class="post-metadata">

**Author:** ![nodecentral](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodecentral/32/10432_2.png) [@nodecentral](https://discourse.nodered.org/u/nodecentral)\
**Post date:** [6 September 2018 22:43 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/7 "2018-09-06T22:43:00Z")

</div>

Thanks all.

---

<div class="post-metadata">

**Author:** ![nodecentral](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodecentral/32/10432_2.png) [@nodecentral](https://discourse.nodered.org/u/nodecentral)\
**Post date:** [7 September 2018 07:35 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/8 "2018-09-07T07:35:55Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/959daedf295359def5f8d7e1d40408a4a56d89e2.png) My goal was to get 4 gauges horizontally, but there seems to be a limit on how wide the group can go, I can’t seem to set the group higher than 22, and also one of the gauges refuses to save as a 6x6 size, returning to 6x5 so they do not sit aligned on the bottom.

Is this a known bug ? (v0.19.2)

---

<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:** [7 September 2018 08:01 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/9 "2018-09-07T08:01:17Z")

</div>

You can go as wide as you can stretch it... I'm currently up to 48. No reason why one gauge would do that - try cut and paste another one then rewire it.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/212d6767ede8e3b48bb42aa79547ea983a16039e.jpeg)

---

<div class="post-metadata">

**Author:** ![nodecentral](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodecentral/32/10432_2.png) [@nodecentral](https://discourse.nodered.org/u/nodecentral)\
**Post date:** [7 September 2018 17:36 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/10 "2018-09-07T17:36:25Z")

</div>

Thanks - I have just tried it on a PC browser and it works fine

This looks to be a limitation/bug on the Safari IOS browser as that seems to have issues with resizing

---

<div class="post-metadata">

**Author:** ![nodecentral](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodecentral/32/10432_2.png) [@nodecentral](https://discourse.nodered.org/u/nodecentral)\
**Post date:** [7 September 2018 19:04 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/11 "2018-09-07T19:04:42Z")

</div>

Quick follow on question,..

How are the gauges sorted/ordered when added to a group on the dashboard ?  
They seem to be random, not alphabetical?

---

<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:** [7 September 2018 19:12 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/12 "2018-09-07T19:12:09Z")

</div>

They should be ordered as per the dashboard panel on the right

---

<div class="post-metadata">

**Author:** ![nodecentral](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodecentral/32/10432_2.png) [@nodecentral](https://discourse.nodered.org/u/nodecentral)\
**Post date:** [7 September 2018 19:26 UTC](https://discourse.nodered.org/t/dashboard-have-gauges-shown-horizontally/2852/13 "2018-09-07T19:26:30Z")

</div>

Doh, thanks for the reminder