Show data on Chart instead of tooltip - google-visualization

Question

Using Google pie charts
Fiddle
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 20],
['Eat', 2],
['Commute', 2],
['Watch TV', 2]
]);
How can I get the 'Hours per Day' to show in the chart itself. Now it is showing in the tooltip mouseover. For example mouseover on Eat will show 2. When I save/print the chart I can't get these items. How to show this on the chart?

Answer 1

the pieSliceText configuration option allows you to change what appears on each slice
to get the value of the row, use...
pieSliceText: 'value'
also, if the chart isn't big enough, it will omit the label
there are several ways to size the chart
you can style the div container,
or set the height and width in the options
also, google recommends waiting on the chart's 'ready' event,
before calling any methods, including getImageURI
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 20],
['Eat', 2],
['Commute', 2],
['Watch TV', 2]
]);
var options = {
height: 400,
legend: {
position: 'labeled',
textStyle: {
color: 'blue'
}
},
pieSliceText: 'value',
title: 'My Daily Activities',
width: 800
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="image_div"></div>