What am I doing wrong? I want to create a simple flex container that I can repeat over and over, in it I want a label, a gauge, an LED display, and a sparkline. The label, LED, and sparkline work great. I can click on it and expand it, shrink it, doesn't matter it works. The gauge on the other hand, I either cut off the top number or the final number on the right side. If I click on the flex container and move it around until the gauge looks right everything else looks ridiculous. I've tried specific pixel column sizes, that just make it worse. I tried changing the size of the gauge and that just moves it to a different position in the container which I didn't ask for. Same with changing grow or shrink. There has to be an easy fix for this. Any ideas? Soon I'm going to have to abandon the gauge all together because I'm running out of design time.
Try reducing props.outerAxis.percentRadius from 100 to something like 80-90 so the axis labels have room? and reduce props.style.fontSize maybe.
Otherwise, what's your basis/shrink?
Thanks Bobby. Reducing percentRadius really helped. Adjusting fontSize helped too. Currently basis is 175px and shrink is 1. Once I get one flex container the way I want it, I need to make eight of them fit on the screen plus other smaller containers with just numeric displays. So the overall container may shrink some.