I am using Google Charts (donut type) to display the data on our application. I noticed that when the label wouldnt fit on the pie slice, it wouldnt display. I've been checking the internet and their documentation but I could not find a way to manipulate the labels to wrap text or display all the time.
The label for the yellow slice below is not displayed.

I am using Google Charts (donut type) to display the data on our application. I noticed that when the label wouldnt fit on the pie slice, it wouldnt display. I've been checking the internet and their documentation but I could not find a way to manipulate the labels to wrap text or display all the time.
The label for the yellow slice below is not displayed.

• javascript
• google-visualization
• data-visualization

1 Answer 1

It doesn't show the percentage label if the slice is less than 5% (this number varies depending on the size and width of your pi chart, but it's 5% in this example).

In the below graph, green is 5% and purple is 4.9%.

Here are some ideas for how to deal with this:

1) Add the following options to your options object. It will bine everything with less than 5% into one miscellaneous category that will be labeled.

sliceVisibilityThreshold: 0.05,
pieResidueSliceLabel: "Other",

2) Reduce the font-size. It still won't show labels it can't fit on, but it will show more labels because it'll be able to fit.

pieSliceTextStyle: {
      color: 'black',
      fontSize:11
},

3) Enter the realm of desperate hackery and set a font-size in options that is tiny so they all render, then use CSS to make those labels large again. However, because they don't fit and because the spacing is all messed up, it'll look like garbage.

pieSliceTextStyle: {
     color: 'black',
     fontSize:0.5
},

CSS

svg g text{
    font-size:11px !important;
}

JSFiddle