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);
First column: Enter a label or category for each row. Second column: Enter positive numeric data. You can also add a label name in the first row (optional). Rows: Each row represents a slice of the pie. Tip: If the value of a label is negative or 0, it won’t show up in the chart.
Customize a pie chart. On your computer, open a spreadsheet in Google Sheets. Double-click the chart you want to change. At the right, click Customize. Choose an option: Chart style: Change how the chart looks. Pie chart: Add a slice label, doughnut hole, or change border color. Chart & axis titles: Edit or format title text.
Numbers between 0.4 and 0.6 will look best on most charts. Values equal to or greater than 1 will be ignored, and a value of 0 will completely shut your piehole. You can't combine the pieHole and is3D options; if you do, pieHole will be ignored. Note that Google Charts tries to place the label as close to the center of the slice as possible.
Double-click the chart you want to change. At the right, click Customize. Choose an option: Chart style: Change how the chart looks. Pie chart: Add a slice label, doughnut hole, or change border color. Chart & axis titles: Edit or format title text. Pie slice: Change color of the pie slice, or pull out a slice from the center.
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 32What 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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With