Search code examples
javascriptgoogle-visualizationdata-visualization

How to display all labels in Google Charts donut chart

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.

enter image description here

Solution

  • 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%.

    enter image description here

    Here are some ideas for how to deal with this:

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

    sliceVisibilityThreshold: 0.05,
pieResidueSliceLabel: "Other",

    enter image description here

    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
},

    enter image description here

    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;
}

    enter image description here

    JSFiddle