Google Piechart How To Show Values Instead Of Percentage

If you want to display actual values on your Google Pie Chart rather than just percentage values, you're in the right place! Adding actual values to your pie chart can provide your audience with more precise information at a glance. Let's dive into how you can easily make this adjustment.

To start, you'll need to modify your existing Google Pie Chart code slightly. In your code snippet, you should have a data array that includes your data values. By default, Google Pie Charts display these values as percentages. However, we can make a simple adjustment to show the actual data values.

Let's walk through the process step by step.

1. Modify Your Data Array:
In your data array, you will typically have two columns: one for the data label and the other for the data value. To display the actual data values, you'll need to keep this structure but make sure to include your numerical values in the data array.

2. Adjust the Chart Options:
Next, you'll need to modify the options for your Google Pie Chart. Within the `options` object, locate the `pieSliceText` property. By default, this property is set to `'percentage'`, but you can change it to `'value'` to display actual data values.

3. Update Your Chart Code:
After making these changes, update and rerun your code with the modifications. Once you've done that, your Google Pie Chart should now display the data values instead of percentages.

Here's an example snippet of how your code might look after these adjustments:

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieSliceText: 'value' // Display data values instead of percentages
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);
}

By following these simple steps, you can enhance the clarity of your Google Pie Chart by showing actual data values alongside the chart slices. This modification can make your charts more informative and easier to interpret for your audience.

Feel free to experiment with different chart options and styles to further customize your Google Pie Chart and make it even more engaging.