javascript - How to display all labels in Google Charts donut chart - Stack Overflow

admin管理员组

文章数量:1322838

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

Share Improve this question Follow edited Nov 5, 2015 at 18:18 Charles Clayton 18k1414 gold badges9393 silver badges122122 bronze badges asked Nov 4, 2015 at 11:17 JADEJADE 52355 gold badges1212 silver badges2525 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptHow to display all labels in Google Charts donut chartStack Overflow