Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mis-aligned labels/slice text in my Google Pie Charts

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

mis-aligned labels in the Google Pie ChartAligned

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);
like image 277
Jo H Avatar asked Nov 21 '13 11:11

Jo H


People also ask

How do you create a pie chart with labels?

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.

How do I edit a pie chart in Google Sheets?

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.

What are the best values for Piehole labels in Google Charts?

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.

How do I change the color of a pie chart?

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.


1 Answers

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

like image 82
Braiam Avatar answered Oct 03 '22 22:10

Braiam