I have a simple 1/2 circle gauge, and am trying to change it so that rather than filling clockwise, as is the current standard build in direction, it fills counterclockwise instead.
I'm going from -6 on the left to 0 on the right. I want the start point of the fill to be at zero, and fill counter clockwise going down towards -6.
If I change my min and max values so that the -6 is "max" and 0 is "min", the gauge component becomes extremely small rather than staying at the 1/2 circle size.
If I change my start and end angles to be reversed (360 start and 180 end), the component does not fill correctly. It only makes it about two degrees around the circle, no matter what I put as my value.
Does anyone have a solution that maybe I have missed?
Been a long time since I've messed with the gauge, but can you not just swap the fill/background colors for the gauge itself and leave everything else as normal?
That seems to work for the direction of the fill, but I'm still having trouble with it filling correctly. When my value is set to 0 (when the gauge should be "empty"), it's still only moving a few degrees.
When value is set to -6, the whole bar is red. But when value is set to zero, it should be fully blue, but looks like the above instead. It moves a nominal amount from this position when set to any other number.
There seems to be a couple of quirks.
- It doesn't like
maxValue : 0 and seems to assume that it's an error and works as though you had set it to 100. I tried setting it to 0.0001...
Try this instead:
-
Set the chart to minValue : 0 and maxValue : 6.
-
Use an expression on value to change the sign of your variable so that it's positive.
-
Add style.transform : scale(-1, 1). This will flip the chart horizontally. This in turn has the benefit that you can use the arc.cornerRadius property and the arc will run the right direction.
-
The label is reversed too and doesn't have the negative sign but you can disable that and use a label.
2 Likes
