Perspective pie labels obscured

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.