Iam using Google Chart in Angular 6
I am using
pieSliceText: 'value'
But I need to display both label and value on the pie slice,
I tried using
pieSliceText: 'label-and-value'
similar to
pieSliceText: 'value-and-percentage'
But this doesnt work for me
a couple options...
1) use the following option to label the slices...
legend: {
position: 'labeled'
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
height: 400,
is3D: true,
legend: {
position: 'labeled'
},
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart_3d"></div>
2) use the following option to display the value of the slice...
pieSliceText: 'value'
with the above option, the slice will display the formatted value by default.
using object notation, we can provide both the value v:
and formatted value f:
in the data table.
{v: 11, f: 'Work: 11'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', {v: 11, f: 'Work: 11'}],
['Eat', {v: 11, f: 'Eat: 2'}],
['Commute', {v: 11, f: 'Commute: 2'}],
['Watch TV', {v: 11, f: 'Watch TV: 2'}],
['Sleep', {v: 11, f: 'Sleep: 7'}]
]);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 12,
left: 12,
right: 12,
bottom: 12
},
height: 400,
is3D: true,
legend: {
position: 'none'
},
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart_3d"></div>