Perspective pie labels obscured

Ignition
1
I have a view (actually a few of these) that is essentially just a pie chart and a button(to switch to percent mode) that I've embedded into several other views (mainly for mobile responsiveness). When the view is first displayed, the labels on the left side of the chart are displayed on top of the chart, the ones on the right are displayed in the white space to the right.

image

On the view is a button that the user can click to switch the show as percent property from true to false. If the user clicks the button to "percent" mode, the switches it back to "normal" mode, the labels are shown correctly where the white space is used on both sides.

image

Is there a way to force the chart to show the labels into the white space when the page initially loads? Also, when displaying this view on a smaller device, the labels are truncated due to a lack of space. Is there a way to make the chart itself smaller so that the labels have more room?

image

2

Unfortunately, the Pie Chart is one of the few components where we rely on a third-party library to render the component. Due to this, we have very little control over how the component renders pieces, and even general CSS settings. I’ll try to break down why you’re seeing what you’re seeing, but there’s really very little that can be done about any of your issues.

  1. I suspect the Pie Chart is trying to render before the page has completed defining its structure, and so the Pie Chart starts out thinking it has less space than it does. This is just a result of the “draw order”. You might be able to avoid this if you make the Pie Chart the last item in your View, OR if you refresh your binding after the page has loaded everything. This would result in a “flash” as the data of the Pie Chart re-renders, but maybe that’s better than overlapping labels. Or maybe instead of refreshing the bindings, you just toggle the label format from percent back to standard because you’ve already seen that fixes it.

  2. The truncated labels are the Pie Chart trying to dynamically render elements of unknown dimensions in a finite space. The Pie Chart will always adjust the CHART itself to take up a reasonable amount of space based on the height and width, but the Pie Chart has no idea how long labels will be, how many there will be, nor how long they could be, so it doesn’t allocate available space to labels. Normally I would recommend adjusting your overflow property, but… the underlying library ignores any overflow setting we apply to it, so there’s no way to adjust the overflow.

The best recommendation I have for you is to create your own Legend within a View which you then Embed below the Pie Chart, and give that View the same data and colors the Pie Chart has. It’ll be up to you to handle the calculations and all of that, but you’ll have far more flexibility. Once that is done, you’ll want to alias your sections, so that instead of long labels like PR103_01_20220627_2_001 you just have 1, and the Legend translates that Label into meaningful text, ie: 1: PR103_01_20220627_2_001.

3

Well that’s unfortunate but it’s not a huge issue. I’ll give your legend idea a try. Thanks for the quick response!!!

1 Like
4

I notice there is a clippath assigned to the chart.
you can remove it with clip-path:unset for some basic overflow to work... But that doesnt really do much for svg's

image
image760Ă—471 22.1 KB

[data-component="ia.chart.pie"] g {
 clip-path: unset;
}

But getting svg text to wrap and stuff is a whole other story tho...

Making the chart smaller might be possible.
Maybe with a mediaquery/breakpoint container to make the piechart a bit smaller as a whole together with the overflow trick, and centered?
wouldnt be to bad, you'll just have to find the right sizes fitting for your screens/expected text
image