# How to edit pie chart width and height with ui\_template

**URL:** <https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060>\
**Category:** Dashboard\
**Created:** [21 May 2020 22:24 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060 "2020-05-21T22:24:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [21 May 2020 22:24 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/1 "2020-05-21T22:24:27Z")

</div>

Hello, fellas. I've been building a dashboard for where I work, and its basically done. But i have a situation similar to this one:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b2227170c63c2b776d0811265d15cd61c6f60fe9.png)  
How do I edit it in the ui\_template? I've tried using css with its class

```auto
canvas {
width:"10"
height:"15"
}

```

or with script

```auto
<script>
    var canvas = document.getElementsByTagName('canvas');
    canvas.width = 800;
    canvas.height = 600;
</script>

```

Any ideas?

---

<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:** [21 May 2020 22:56 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/2 "2020-05-21T22:56:34Z")

</div>

Can you share that part of your flow ? It should autos cake to fit so sizing shouldn't be necessary..

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [21 May 2020 23:10 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/3 "2020-05-21T23:10:34Z")

</div>

Here it goes, just want to point out that i made this one at home just for testing purposes. I don't really have access to the one i'm building.

```auto
[{"id":"359f4766.71db78","type":"ui_template","z":"a66870f1.66458","group":"ad421a6d.0cd738","name":"Dashboard stylesheet","order":1,"width":0,"height":0,"format":"<style>\n/*\nIt is reasnoble to declare the colors as CSS variables\nso they can be easily called by name where needed.\n\nYou can see that in many places the variables are not used. Change it!\n*/\n\n:root {\n --color-green-primary: rgb(51, 204, 51);\n --color-green-secondary: rgb(26, 101, 26);\n --color-red-primary: rgb(255, 0, 0);\n --color-red-secondary: rgba(153,0,0,1);\n --color-gray-primary:rgba(40,40,40,1);\n --color-gray-secondary:rgba(65,65,65,1);\n --color-text-primary: rgb(230, 226, 209);\n --color-widget-border: rgb(84, 78, 78);\n}\n\n/*\nAll CSS adjustments are commented out.\nTurn rules on one by one and see the changes.\nDon't use too many elements cos it wil be confusing\nStart with simple elements like text, slider or button\n\nMany of elements like buttons have states, \nthose rules must be found and adjusted also.\n*/\n\n\n.masonry-container {\n position: relative;\n width: 100%;\n height:100%;\n margin: 0 auto;\n background: rgb(255,0,0);\n background: linear-gradient(180deg, var(--color-gray-primary) 0%, var(--color-gray-secondary) 100%);\n}\n\n\n\n.nr-dashboard-cardcontainer {\n position: relative;\n box-shadow: inset 0px 1px 4px 0px #000000bb;\n border-radius: 15px;\n}\n\n.nr-dashboard-theme ui-card-panel {\n background-color: #33333300;\n color:var(--color-text-primary);\n border-radius: 15px;\n box-shadow: 0 0 8px 0px #00000080;\n}\n\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n color: var(--color-text-primary);\n text-shadow: 4px 2px 4px #00000045;\n box-shadow: 0 -1px 5px 1px #00000045;\n border-radius: 12px;\n border: 1px solid var(--color-widget-border);\n}\n\ncanvas {\n style: \"20\";\n}\n\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: var(--color-text-primary);\n}\n\n.md-button {\n display: inline-block;\n position: relative;\n cursor: pointer;\n min-height: 36px;\n min-width: 88px;\n line-height: 36px;\n vertical-align: middle;\n align-items: center;\n text-align: center;\n border-radius: 12px;\n box-sizing: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n outline: none;\n border: 0;\n padding: 0 6px;\n margin: 6px 8px;\n background: transparent;\n color:var(--color-text-primary);\n white-space: nowrap;\n text-transform: uppercase;\n font-weight: 500;\n font-size: 14px;\n font-style: inherit;\n font-variant: inherit;\n font-family: inherit;\n text-decoration: none;\n overflow: hidden;\n transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n}\n\n\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: #88888800;\n color:var(--color-text-primary);\n}\n\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #88888855;\n}\n\nmd-slider .md-thumb {\n z-index: 1;\n position: absolute;\n left: -10px;\n top: 14px;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n -webkit-transform: scale(.7);\n transform: scale(.7);\n transition: all .4s cubic-bezier(.25,.8,.25,1);\n box-shadow: 0 0 6px #00000070;\n}\n\n*/\n\n/*\nAdvanced stuff - dynamic change of card CSS\n\nClasses here can be used to make colored stripe at the top of card\nUsage is not in here, but they are added to md-card when needed within another template\n\n.carderr {\n background: rgb(255,0,0);\n background: linear-gradient(180deg, var(--color-red-primary) 0px, var(--color-red-secondary) 3px, rgba(80,80,80,1) 4px, rgba(45,45,45,1) 100%);\n}\n.cardok {\n background: rgb(39,255,0);\n background: linear-gradient(180deg, var(--color-green-primary) 0px, var(--color-green-secondary) 3px, rgba(70,70,70,1) 4px, rgba(40,40,40,1) 100%);\n}\n*/\n\n</style>\n\n<script>\n var canvas = document.getElementsByTagName('canvas');\n canvas.width = 800;\n canvas.height = 600;\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":420,"y":360,"wires":[[]]},{"id":"ad421a6d.0cd738","type":"ui_group","z":"","name":"Radial Gauges","tab":"2a0ea3c6.c5bb0c","order":2,"disp":true,"width":"6","collapse":false},{"id":"2a0ea3c6.c5bb0c","type":"ui_tab","z":"","name":"Widgets","icon":"dashboard","order":2,"disabled":false,"hidden":true}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 May 2020 07:46 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/4 "2020-05-22T07:46:58Z")

</div>

You have cake on the brain Dave 😆

(Definite swypo that)

---

<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:** [22 May 2020 07:59 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/5 "2020-05-22T07:59:40Z")

</div>

For me it renders chart perfectly. No need for any canvas manipulation

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/49e5cf06f47d0378a4be909a1b5516426b2ff16c.png)

---

<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:** [22 May 2020 08:22 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/6 "2020-05-22T08:22:35Z")

</div>

That's just a template... I see no gauge.  
If I create my own it's all good...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/79e582881fbc48873f4af423757ff7ac2bb30059.png)  
even if I shrink the group size  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/11e907fe06da2edfcb3a9931830194572e79e2f4.png)

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [22 May 2020 09:53 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/7 "2020-05-22T09:53:14Z")

</div>

It may work with that example, but here at work it simply wont fit. I just need to find a way to shrink ir down a lil bit with manipulation of the canvas. Any idea?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 May 2020 09:55 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/8 "2020-05-22T09:55:34Z")

</div>

If you must then what about CSS transform scale - [example](https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_scale2)

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [22 May 2020 09:58 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/9 "2020-05-22T09:58:16Z")

</div>

I will take a pic when i get at my desk. Bur i had to config it to display the value of each slice in the lavel that took a bit too much space

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [22 May 2020 09:59 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/10 "2020-05-22T09:59:08Z")

</div>

Wont do tried that

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 May 2020 10:01 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/11 "2020-05-22T10:01:13Z")

</div>

> [@RyuunosukeDS3](#):
>
> Wont do

wont do == not suitable - OR - wont do == wont work?

I can guarantee it will work (but might not be suitable)

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [22 May 2020 10:04 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/12 "2020-05-22T10:04:13Z")

</div>

I mean, when i tried it changed nothing... Maybe im failing to get the right class??

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [22 May 2020 10:05 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/13 "2020-05-22T10:05:40Z")

</div>

![IMG_20200522_070212](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c52b4f16d088c524f7822c7546f934c68a8a82ce.jpeg)  
Thats how it is here at work. Cant share the flow. But you guys might will probably get whats going on

---

<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:** [22 May 2020 10:15 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/14 "2020-05-22T10:15:33Z")

</div>

If I set mine to just 2 rows high it still scales to fit.  
How do you have yours set exactly ?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/378624cebb1cfd9f87af981448f01cac96b88236.png)

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 May 2020 10:20 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/15 "2020-05-22T10:20:53Z")

</div>

At a guess, you have a fair amount of styling to achieve that look - likely some collision of styles.

Use devtool F12 to inspect and see where the sizing is coming from.

EDIT - nice looking dashboard 👍

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [22 May 2020 10:30 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/16 "2020-05-22T10:30:21Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bb8b4f250d150be59ddce701cfc628b3f6282be7.png)  
Mine is like that. The main problome is the values i gave it using the label.

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [22 May 2020 10:32 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/17 "2020-05-22T10:32:34Z")

</div>

I tried that. If i edit this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/371ac5f2b6aa794e8b603a1f74c38515f3324bfa.png)  
Using the devtool it woks. but how can i do that in the ui\_template i've tried a couple of ways and never managed to make it work.

Also thanks! I based my style on hotNipi's

---

<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:** [22 May 2020 10:33 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/18 "2020-05-22T10:33:01Z")

</div>

still odd,....  
which version of dashboard are you using ?

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

---

<div class="post-metadata">

**Author:** ![RyuunosukeDS3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryuunosukeds3/32/22503_2.png) [@RyuunosukeDS3](https://discourse.nodered.org/u/RyuunosukeDS3)\
**Post date:** [22 May 2020 10:34 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/19 "2020-05-22T10:34:58Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/725425bd93d75cb612894636dcae6f7b10e25255.png)  
latest...

here's how my label is set:

```auto
<font color= #55A5FF>&#9632</font> Caldo Fábrica / <font color= #22259F>&#9632</font> Caldo Destilaria<br><font color = #FFAB0B>{{labelvaluef}}</font>&nbsp&nbsp<font color = Sienna>{{labelvaluepf}}</font>&nbsp&nbsp&nbsp/&nbsp&nbsp&nbsp<font color = #FFAB0B>{{labelvalued}}</font>&nbsp&nbsp<font color = Sienna>{{labelvaluepd}}</font>

```

---

<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:** [22 May 2020 10:39 UTC](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060/20 "2020-05-22T10:39:51Z")

</div>

Ah... so it's multi-line... yeah that's not really expected or catered for.  
You could use the built in legend instead ?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/ab7be498ae6faaa5bf785ce9aad83d0baa496fd5.png)

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

[Next page](https://discourse.nodered.org/t/how-to-edit-pie-chart-width-and-height-with-ui-template/27060.md?page=2)