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);

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);

• javascript
• charts
• google-visualization

• 13 I believe this is a Chrome bug. We (Google Charts) have a hacky work around that we're going to cherry pick into the next release, but that might be some time. So, this will magically fix itself in the next couple of days/weeks. – Jeremy Faller Commented Nov 21, 2013 at 14:50
• ah right! I'm glad it's not just me who's seen this bug then and it's not something I've done wrong :) I like how it's a Google product but doesn't necessarily work the way it's intended in another Google product... lol - thanks for updating me! – Jo H Commented Nov 21, 2013 at 15:05
• I see same issue in Firefox, so it's not isolated to Chrome. Are you using Bootstrap by any chance? I think it might be related to that.. – Piotr Rochala Commented Mar 3, 2014 at 9:25
• unfortunately I'm not using Bootstrap so for me it can't be related to that... – Jo H Commented Mar 3, 2014 at 13:59
• 5 find no issue in jsfiddle/WqFPF – rjdmello Commented May 28, 2014 at 7:16

1 Answer 1

This issue was fixed in November 7, 2013, it shouldn't cause more issues.

From the bug report:

Steps to reproduce the problem:

1. Highlight any cell in the main table's left column in dev inspector (e.g. the one containing "100")
2. 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).