Want to use a 360 gauge to show the wind direction.
Got this working but 0 is at the bottom, anyone know how to make 0 at the top as it would be on a compass ?
Andrew
Which gauge are you currently using?
The native gauges that are available in Super Tiles let you customize a variety of things, but an angle offset is not one of them.
That being said, we also put together a couple different Gauge Custom Tiles. The Apex Charts one starts the fill from the top of the circle, so it might even accomplish what you want by default. Otherwise the post links to the Apex Charts documentation which has a ton of settings that can be tweaked.
Thanks Josh, just using the standard custom gauges.
Will have a look at the Apex gauges.
Andrew
Had a look at the APEX gauges @josh but unless i am mistaken they only work for percentage figures, i.e. 0 to 100.
Might be me, but could not see a way to make it work for 360 degrees.
Any other gauges out there i can look at?
Can’t be the first to ask this ?
Andrew
I forgot that was one of the limitations of the Apex gauge. In theory the code could be updated to do the conversions and I have even left a comment in the code around line 82 linking to an issue in the Apex Charts GitHub discussion an approach.
I didn’t see an option in the Gauge.js documentation for a arc position offset. In theory, you could tweak the code in the Gauge.js variant to rotate the whole canvas 180 degrees though:
#chart {
transform: rotate(180deg);
}
And you would supply custom JSON settings to the chart instance… probably something close to:
{ label: false, min: 0, max: 100, angle: -0.5, lineWidth: 0.25, radiusScale: 1 }
But since it was designed for an arc, the full circle will look a bit small. You might be able to tweak that too, but it’s been a while since I’ve looked at this code, so I don’t recall the limitations off the top of my head.
The simplest might just be to scale it with CSS, but it will make the canvas slightly blurry which may or may not be noticeable to you depending on the device and viewing distance:
#chart {
transform: rotate(180deg) scale(1.75);
}
Arguably, the same approach with a CSS transform could be applied to a gauge in a Super Tile as well, but it’s not something we officially support. For example, @just_jake did something targeting specific elements within a Super Tile in this post:
