Google Chart: Pie Slice text weird position

1
votes

When creating Pie Charts (using Google Chart) they would always output with very oddly positioned Slice Text/Annotations, and when a slice was very small the text would still be on the slice. See image below. Google Chart Pie Chart Output This would occur even using the copied Javascript code from the Google Charts examples. However, I would hide the chart div where the output needs to reside (using display:none) because I wanted to open the static chart in a new tab opposed to pasting it on the page.

1
chartsgoogle-visualizationslice

1 Answers

0
votes

In order for the chart to generate correctly the DIV where your chart outputs to cannot be set to display: none. This seems to be a bug with Google Charts. I found a workaround if you want to hide the chart output DIV. You can set visibility: hidden which will hide the DIV and still allow the chart to generate properly. If you would like to completey mimic the display:none css, I used the following styles:

visibility: hidden;
position: absolute;
top: -9999px;
left: -9999px;

Hope this helps you.