How to edit pie chart width and height with ui_template

Dashboard
1

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
How do I edit it in the ui_template? I've tried using css with its class

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

or with script

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

Any ideas?

2

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

3

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.

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

You have cake on the brain Dave :laughing:

(Definite swypo that)

1 Like
5

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

image

6

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

image
image692Ă—660 19.2 KB

even if I shrink the group size
image
image354Ă—560 13.3 KB

7

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?

8

If you must then what about CSS transform scale - example

9

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

10

Wont do tried that

11

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

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

12

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

13

IMG_20200522_070212
IMG_20200522_0702124624Ă—2136 2.15 MB

Thats how it is here at work. Cant share the flow. But you guys might will probably get whats going on

14

If I set mine to just 2 rows high it still scales to fit.
How do you have yours set exactly ?
image

image
image728Ă—450 24.3 KB

15

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 :+1:

16

image
Mine is like that. The main problome is the values i gave it using the label.

17

I tried that. If i edit this:
image
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

18

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

image
image686Ă—698 35.6 KB

19

image
latest...

here's how my label is set:

<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>
20

Ah... so it's multi-line... yeah that's not really expected or catered for.
You could use the built in legend instead ?
image

image
image702Ă—646 39.1 KB