[Feature-12756] Piechart property question: text color,legend,and border

I use Igntiion8 Nightly 8.0.3 and I have some questions about piechart.

1 the text color style seems does not work. I set the background dark and want a white text color.
2 If I want to put the legend on the left side or the right side?
3 I find the legend icons have a light border, can I remove it?

hope an a nswer :slight_smile:


So the pie chart has kind of taken a back seat while we’ve been working on other higher priority items. We do have a large ticket awaiting review that includes lots of feature and performance updates for the pie chart. As it stands now, you can’t do any of those things you’ve mentioned, sadly. The pie chart is one big SVG that sits in a container. The style prop actually applies to the container that the pie chart sits in and not the pie chart itself. Using ‘color’ in styles won’t work, since those labels are actually SVG text elements. I will bring up this large ticket internally and update you on any developments. Thanks for your patience.


@ynejati Is there a way to change the legend to show total records instead of percentages?

No, unfortunately not at the moment. We haven’t exposed the ability to format labels yet. Let me get back to you about this.

For posterity, the 8.0.9 nightly build available today provides new formatting properties, and a way to show values instead of percentages on the component.

Is there a way to align the legend to the side of the pie chart?
I have a wide area where the pie chart would look better having the legend to the left instead of beneath the pie.

Your timing is impeccable. Version 8.1.2 (the RC came out yesterday, production release should be available in a couple of weeks) added some new properties to the pie chart, including a props.legend.position property that does exactly what you’re looking for.

1 Like