Pie Chart is not displaying percentage for low values

15,647 views
Skip to first unread message

Sergio Guillen

unread,
Dec 15, 2015, 5:52:58 PM12/15/15
to Google Visualization API
I've been trying Google's Chart API for a time, it works like a charm for my needs but I figured out that when using pie chart with low percentages the library doesn't display the lower ones.

I tried to reduce fontSize property, it works for certain values (example http://jsfiddle.net/73tnp7ot/2/) but for lower ones the library doesn't display them, for the example given if I change values from 4 to 2 percentage will not be displayed. http://jsfiddle.net/5rd751hx/5/

I need the percentage to be displayed, this is because I have to export the chart to an image.

Is there a way to display low percentages inside or outside the pie?

Thanks in advance

Daniel LaLiberte

unread,
Dec 15, 2015, 7:44:28 PM12/15/15
to Google Visualization API
When the slice is so slim that you can't fit the text inside, then you might want to consider the labeled legend option:

  legend: { position: 'labeled' }

You'll have to change your chart bounds so there is room for the labeled legend values, which are displayed outside the piechart circle.  

When you have very small values, you might also need to change the sliceVisibilityThreshold to 0, otherwise it may be hidden in the 'remainders' slice.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/05ac7c6b-9bf1-4b9d-9867-75dad7f36a97%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Sergio Guillen

unread,
Dec 16, 2015, 1:59:35 PM12/16/15
to Google Visualization API
I first option was labeled and I had this:
As you can see small values doesn't have an associated label.

You'll have to change your chart bounds so there is room for the labeled legend values, which are displayed outside the piechart circle.  
Maybe the problem that small values doesn't have an associated legends is because I don't have enough room, how could I fix that?

Thanks


Daniel LaLiberte

unread,
Dec 16, 2015, 4:33:11 PM12/16/15
to Google Visualization API
The labeled legend feature can't always show all the labels, depending on how much space there is outside the piechart.  But in your case, you would have more room if you either change the order of the rows or rotate the piechart around so there is a better distribution between the left and right sides.  See the docs and example at:  https://developers.google.com/chart/interactive/docs/gallery/piechart#rotating-a-pie-chart

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages