Mis-aligned labels/slice text in my Google Pie Charts
charts, google-visualization, javascript
Solution
This issue was fixed in November 7, 2013, it shouldn't cause more issues.
From the bug report:
Steps to reproduce the problem:
- Highlight any cell in the main table's left column in dev inspector (e.g. the one containing "100")
- On page, highlighted box shows width 32, metrics in devtools shows width 32, and a separate "ruler" extension shows width 32
What is the expected behavior? That element's offsetWidth also returns 32
What went wrong? offsetWidth is dramatically under the actual value, with offsetWidth of 22 in this case. Off by arbitrary amounts in other cases (e.g. upper-right cell and the one beneath it differ by 1px).
Problem
I'm using `Google Charts` to show some data regarding opens and clicks from emails as Pie Charts. I've got the Pie Charts showing the right data, however I'm having issues with the label on the pie chart. I'm not sure why, but it's mis-aligned - it's decided that the label should not be in the middle of the slice like usual (Left Picture). Interestingly enough, even though most of the time I've seen it misaligned, I have noticed the text aligns itself correctly a few times for the top slice (mainly when I've just made changes to the code) but then it goes back to being at the edge of the slice after refreshing (Right Picture). Does anyone know how to get the positioning correct for these or if there's something I'm doing that's knocking out the positioning? ``` function drawPieChartOpens() { var data = new google.visualization.arrayToDataTable([ ['Opens','Count'], ['Opens',3988], ['Non Opens',21145] ]); var options = { 'width':200, 'height':300, 'legend':'none', colors: ['#00933B','#DDDDDD'], slices: {0: {offset: 0.2}}, 'chartArea':{width:'100%'} }; var chart = new google.visualization.PieChart(document.getElementById('opens-2782714')); chart.draw(data, options); } google.setOnLoadCallback(drawPieChartOpens); ```