Reputation: 73
I am using Google Pie Chart, I want to display round percentage value but it is not showing like that. Anyone, suggest me an idea to show rounded percentage value. My code looks like
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Members', 'Total Members'],
['Members', 23],
['Total Members', 41 - 23]
]);
var options = {
width: 150,
height: 150,
chartArea: {
width: 150,
height: 150,
left: 10},
legend: {position: 'none'},
tooltip: {trigger: 'none'},
colors: ['#FEC240', '#FFFFFF'],
pieSliceText: 'percentage',
pieSliceTextStyle: {
bold: true,
fontSize: 16,
color: 'black'
},
enableInteractivity: false,
pieSliceBorderColor: "#DFE0E1"
};
var chart = new
google.visualization.PieChart(document.getElementById('checkpie'));
chart.draw(data, options);
<div id="checkpie" ></div>
Upvotes: 3
Views: 3080
Reputation: 61222
there isn't a standard option for setting the format of the percentage shown on the slices
as such, need to calculate the percentage manually,
use option --> pieSliceText: 'value'
-- to show formatted value on slices
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Members', 'Total Members'],
['Members', 23],
['Total Members', 41 - 23]
]);
// find total to calc % manually
var totalData = google.visualization.data.group(
data,
[{column: 0, modifier: function () {return 'total'}, type:'string'}],
[{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
);
// number formatter
var formatPercent = new google.visualization.NumberFormat({
pattern: '0%'
});
// set formatted value for each row
for (var i = 0; i < data.getNumberOfRows(); i++) {
var calcPercent = data.getValue(i, 1) / totalData.getValue(0, 1);
data.setFormattedValue(i, 1, formatPercent.formatValue(calcPercent));
}
var options = {
width: 150,
height: 150,
chartArea: {
width: 150,
height: 150,
left: 10
},
legend: {position: 'none'},
tooltip: {trigger: 'none'},
colors: ['#FEC240', '#FFFFFF'],
pieSliceText: 'value', // <-- show formatted value on slices
pieSliceTextStyle: {
bold: true,
fontSize: 16,
color: 'black'
},
enableInteractivity: false,
pieSliceBorderColor: "#DFE0E1"
};
var chart = new google.visualization.PieChart(document.getElementById('checkpie'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="checkpie"></div>
Upvotes: 2