Gauge Custom Tiles (arc and radial)

[Tonny_Thofner]

Thanks again great support.

Now next i would like to make a dicimal number, and i see it is covered in another post with the code: function formatNumber(number, digits=1) { but i have a hard time to understand where to put in my code ther is as followed :

{ label: “buttom”, min: 0, max: 500, generateGradient: true, percentColors: [ [0.0, “#048d1f”], [0.50, “#b4d302”], [1.0, “#cb1007”] ], }

I do not see it on line 194 but on line 205 and when i change the digits from 0 to 1 and update it is the same. I know i do somthing wrong but i dont know what.

[josh]

See my reply above - it was added natively to the Gauge.js Custom Tile and you can use fractionDigits as one of the chart customizations:

@josh

I just pushed an update so you can specify the fractionDigits as part of the advanced configuration so you don’t have to tweak the code.

{ label: true, min: 0, max: 50, fractionDigits: 1 }

[Tonny_Thofner]

OK Thanks.

now i get it. and it works fine now.

Great help form you Thanks.

[Bruce_Lo]

Is it possible to change the line width and font size when using the gauges in Super Tile?

[josh]

Since you mentioned a Super Tile, I assume you are referring to the native integration of Gauges rather than the custom tiles from this thread?

What do you mean by line width and font size?

[Bruce_Lo]

Sorry for not being clear enough, Josh. The line width referring to the thickness of the arc and the font size for the display of the values.

I would like to change the arc segments to a thinner semi-circle and the value to a smaller font size.

Thanks in advance.

Bruce

[josh]

The Custom Tiles listed at the top of this thread support customizations of the thickness of the arc. IIRC, the font size in the Gauge.js variant is set in the CSS of the Custom Tile but could in theory be customized… and the Apex Charts version can be customized with their JSON specification.

The native Super Tile Gauge does not support customization of the arc. The width changes automatically based on if you pick Arc, Circle, or Radial as the gauge style. And the font dynamically scales based on the number of characters to fit in the space (and thus can’t be overridden).

[Bruce_Lo]

Thanks Josh. I understand now. I’ll check out the Custom Tiles for the customization.

[pieter_pessers]

Hello, Josh.

Thanks for this great tile. I wanted to ask if i can change the position of the poiner a little more up instead of at the bottom.

Thank you.

[josh]

@pieter_pessers

tile. I wanted to ask if i can change the position of the poiner a little more up instead of at the bottom.

On the Gauge.js version? In reading the Gauge.js documentation looks like they have a setting for adjusting the point length but it always seems to start at the center of the gauge with no offset.

So you could adjust the length from the default of 0.74 to 0.3 for example to shorten it, but I don’t see an option to offset the starting position from the center.

Super Tile Gauges

Have you looked at the official Gauges included with Super Tiles? I built those from scratch and included a variety of different pointer types.

For example, this screenshot shows a few different variations. From left to right:

• Needle (short)
• Thumb
• Triangle (outer)

Here’s a few more for reference. Left to right:

• Thumb*
  • Note how the ‘Thumb’ adapts for the ‘Arc’ vs ‘Radial’ gauge types
• Needle
• Triangle (inner)

There’s also a ‘Circle’ gauge type with the Super Tile and with all of the gauges you have the option to NOT display a pointer and to make the gauges interactive/controllable or not.

[pieter_pessers]

Sorry, I’m maybe a little bad in explaining, but when i set the label of a arc on MAX 100 and when the value become more than 100 (let’s say 150) the needle is not going back to the half when it get’s a new value of 50, but to 1/3 (1/3 of 150). It is like it got a new max value of 150.

Can i fix the max value to 100 even when the value goes over this?

[pieter_pessers]

Maybe picture will explain it a little more. I found out to limit max the gauge, but it will also fix the value to a maximum. I calculate the energy cost on a montlhy base. I want to be lower than a fixed cost. But in the winter i will go over. So that is the moment i don’t want a fixed maximum value.

This is what i see. Hopefully you see what i’m seeing.

Scale is still 100%

Value is higher then the max value.

Scale is now 2x bigger. value of 50 is now not the half of the gauge scale, but 1/4.