Shown above is a screenshot of what I’m talking about in the designer as well as in the view this view is embedded in (inside of a tab container). The top of this gauge is cut off. If I resize its container Flex container until the gauge fills the width of the container, it is no longer cut off, but that makes it too vertically large for my purpose. The container setup is shown below.
I’ve tried every combination of margin/padding that I can think of, and every time I do, it simply shifts the gauge downwards but the gauge is still cut off, despite having enough room once it’s moved down.
The same thing happens for a gauge below this one.
It looks like the Gauge “requires” about 220px of space if you’re using Gauge.props.outerAxis.percentRadius at a value of 100 (it’s a percent). Have you tried lowering the percentRadius value to a lesser percent (maybe 80 or 90)? It will “shrink” your entire Gauge, but it should alleviate the clipping symptoms you’re seeing.
3 Likes
That fixed it, and I can definitely live with a smaller gauge, thank you!
1 Like
I am going to revive this issue, because lowering that value does not fix it in all cases. Setting the maxValue to 12 and the percentRadius to 80 still clips the top off the 6. Setting any lower and the scale is wonky. The image here is with a 0-12 gauge, and the percentRadius set to 75%. It would be better if we can properly adjust the gauge inside of the boundary box.
