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