Google pie charts pie slice text positioning error.

Rishabh Kesarwani

unread,

Nov 23, 2017, 3:03:24 AM11/23/17

to Google Visualization API

I'm using the latest version of chrome and google visualization API. Still, I'm encountering undesirable pie slice text position. At the least, one of the pie slice text goes beyond the boundary of the pie chart. Please help.

I've attached the screenshot of the error I'm talking about.

PFA

Screenshot (3).png

Vigneshwaran K.M

unread,

Jul 13, 2018, 8:39:07 AM7/13/18

to Google Visualization API

Hi,

I am also facing the same issue did u find any solution for this?

Rishabh Kesarwani

unread,

Jul 13, 2018, 10:05:53 AM7/13/18

to Vigneshwaran K.M, google-visua...@googlegroups.com

Hi Vigneshwaran!

I couldn’t find any solution. I had to live with it. The bad solution can be to give that element position: relative, top: few px and left: few px.

But this won’t be a good solution.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/yDXa_bVEonc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2ebd16f9-be97-4dc6-b252-e1593e2304c5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

With regards

Rishabh Ranjan Kesarwani

Vigneshwaran K.M

unread,

Jul 18, 2018, 6:09:42 AM7/18/18

to risha...@gmail.com, google-visua...@googlegroups.com

Hi Rishab,

I think u r displaying the chart dynamically using "Display:none" like me, when I use "Visibility:Hidden" it is working as expected. I am not sure why but this trick works

Rishabh Kesarwani

unread,

Jul 18, 2018, 8:47:03 AM7/18/18

to Vigneshwaran K.M, google-visua...@googlegroups.com

Thanks for reaching out back. Can you please tell me where have you used ‘visibility: hidden’? I don’t remember using ‘display: none’ anywhere.

Vigneshwaran K.M

unread,

Jul 20, 2018, 9:50:12 AM7/20/18

to Rishabh Kesarwani, google-visua...@googlegroups.com

Use the following codes to see the difference. In the same way you might have displayed the chart on the go dynamically which might impact the position of text.

Previous Code:

<!DOCTYPE html>

<body>

<div>

// Load google charts

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Task', 'Hours per Day'],

['Work', 8],

['Eat', 2],

['TV', 4],

['Gym', 2],

['Sleep', 8]

]);

// Optional; add a title and set the width and height of the chart

var options = {'title':'My Average Day', 'width':550, 'height':400};

// Display the chart inside the <div> element with id="piechart"

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);

document.getElementById('outerdiv').style.display="";

}

</script>

</body>

</html>

Current Code:

<!DOCTYPE html>

<body>

<div>

// Load google charts

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Task', 'Hours per Day'],

['Work', 8],

['Eat', 2],

['TV', 4],

['Gym', 2],

['Sleep', 8]

]);

// Optional; add a title and set the width and height of the chart

var options = {'title':'My Average Day', 'width':550, 'height':400};

// Display the chart inside the <div> element with id="piechart"

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);

document.getElementById('outerdiv').style.visibility="";

}

</script>

</body>

</html>

Reply all

Reply to author

Forward