Google pie chart force rendering of “minor” labels outside the pie

Question

I've already researched a lot about google pie charts and hidden slice labels but didn't find anything with the labels outside the slices, so I'm hoping there is another solution than already suggested on SO.

I generate a lot of different chart types and for better readability I customize pie (doghnut) charts so they show their labels outside the slices, connected with lines. Now as seen in other questions google charts will just hide the slice label if there is no room for it or if the value is too small, which is unacceptable for me and why I wanted to show them outside where there should be enough room.

Still google charts dislikes "minor" data values and just doesn't show their label(s), even with sliceVisibilityThreshold set to 0, is there any other solution with the following setup in mind? (You should see that the label "Far" for the violet slice is not rendered)

var chartData = {
    "options": {
      "legend": {
        "position": "none"
      },
      "pieHole": 0.5
    },
    "data": [
      [
        "Label 1",
        "Label 2"
      ],
      [
        "Foo",
        33059
      ],
      [
        "Bar",
        57893
      ],
      [
        "Baz",
        8135
      ],
      [
        "Boo",
        12211
      ],
      [
        "Far",
        3740
      ],
      [
        "Faz",
        7219
      ]
    ]
  },
  ctx = document.getElementById('canvas');

var onLoadGoogle = function() {
  var data = new google.visualization.arrayToDataTable(chartData.data);
  var chart = new google.visualization['PieChart'](ctx);
  var options = chartData.options;

  options.legend.position = 'labeled';
  options.pieSliceText = 'none';
  options.sliceVisibilityThreshold = 0;

  chart.draw(data, chartData.options);
}

window.google.load("visualization", "1.1", {
  packages: ["corechart"],
  callback: onLoadGoogle,
  nocss: true
});

#canvas {
  width: 600px;
  height: 300px;
}

<div id="canvas"></div>
<script src="https://www.google.com/jsapi"></script>

No there hasn't been a solution a year ago, but I didn't check if they fixed it with never versions of the plugin. — Simon

dlaliberte dlaliberte · Accepted Answer · 2015-03-23T15:23:18

As noted in the documentation for PieChart, the pieStartAngle option can help to make space for some labels, though there is nothing that can be done if there is just not enough space. This applies to both the default labels inside slices and the labeled legend option you are using.

You could also experiment with the pieSliceTextStyle and legend.textStyle to set the fontSize option to a smaller font.

Google pie chart force rendering of “minor” labels outside the pie

1 Answers