How to modify Google's PieChart pieSliceText positioning

Question

I am having trouble with my Google PieChart pieSliceText position. It is overlapping onto the page and not entirely on the PieChart itself.

See this screenshot photo:

I even adjusted the font to be much smaller, but same problem:

Because of fluctuating data values and percentages, I would like to avoid adjusting the 'pieStartAngle' property as I think it looks silly.

Is there any way to move the label for "Male" onto the pie chart, instead of overlapping in "no-man's land"? I was hoping this was easy (as it is with Google Bar Charts), but it's not.

Here is what my chart options looks like:

var colors = ["#B5ACCE", "#61B036"]; //green and purple colors

var data = google.visualization.arrayToDataTable([
    ['Type',     'Count'],
    ['Male',      parseInt(_maleEnrollment)],
    ['Female',    parseInt(_femaleEnrollment)]
]);

//chart options 
var chartOptions = { 
     title: 'Gender' 
    ,pieSliceText: 'label' 
    ,pieSliceTextStyle: { color: 'black', fontName: 'Arial', fontSize: 20 } 
    ,colors: colors 
    ,backgroundColor: 'transparent' 
    ,legend: { textStyle: { color: 'black', fontName: 'Arial', fontSize: 14 } } 
    ,chartArea: { left: 0, 'width': '100%', 'height': '100%' } 
    ,enableInteractivity: false 
};

I am having a similar issue with the donut chart when the hole gets too big the text is not positioned in a very readable place. — fsteveb, Jun 18 '20 at 03:51

score 2 · Answer 1 · answered Dec 09 '19 at 19:59

2

I seem to have stumbled upon this same error with positioning labels on my Google Charts pie chart. After some fumbling around, I realized that I was executing the chart.draw() function while the target div element was hidden. I'd then toggle the chart element and notice the wonky formatting.

Tweaking my javascript to wait until the div is displayed before drawing the chart fixed my issue.

Before:

After:

answered Dec 09 '19 at 19:59

Daniel Long

1,162
14
30

How do you wait until the div is displayed? – Brainless Sep 03 '20 at 21:23
Nothing fancy. Could be a better way, but I just have a draw chart function, and I execute that function every time I display the chart container element – Daniel Long Sep 04 '20 at 05:44

score 0 · Answer 2 · answered Apr 14 '16 at 18:38

0

For flexibility about the legend you might want to just turn it off and create your own legend with html or taking advantage of other preset options from the API found https://developers.google.com/chart/interactive/docs/customizing_charts

answered Apr 14 '16 at 18:38

jcirni

57
4

It is not the legend I am having trouble with. It is the pieSliceText position of the chart itself. – AussieJoe Apr 14 '16 at 19:46

How to modify Google's PieChart pieSliceText positioning

2 Answers2