Side-by-side Perspective Pie Charts' labels are clipping no matter what I try

I have this hierarchy in a Tab Container within my view. I have it set up so FlexContainer_1 is a row and FlexContainer_0 and FlexContainer (I apologize for the awful names) are columns within the row container.
image
Inside each of these inner Flex Containers is a single pie chart. I’m trying to get the pie charts to display side-by-side but no matter what I do, some text from the labels is cut off from either side, like this:

image

It’s like the pie chart isn’t resizing itself properly within its container.

Is this a bug, or is there some option or style property I should be using that would fix my problem?

You could try setting PieChart.position.shrink to 0. This should prevent the Pie charts from ever being smaller than their position.basis value.

You could also setPieChart.props.style.overflow to “visible”. This would allow the clipped text to display outside the boundaries of the Pie Chart component. Note that you would also need to apply this setting to the parent container, and then possibly the parent container’s parent, and on and on until the text is visible.

The first solution worked, thank you!

1 Like