How to Show Percentage and Values Together in Google Pie Charts

In an earlier post, I demonstrated how to create dynamic Google Pie Charts using data sourced from an SQL Server database through a Web API. Since then, many readers have asked how to display both percentage values and actual figures on each slice of the pie chart. In this article, I’ll show you exactly how to do that using the pieSliceText configuration option in Google Charts.

Show Value and Percentage in Google Pie Charts

In my earlier article, I used the pieHole 🍩 option in Google Charts to transform a regular Pie Chart into a sleek Donut Chart, essentially a pie chart with a hole in the middle. By default, these charts display percentage values on each slice. Take a look at the figure below 👇 to see this default behavior in action.

Creating a Donut Chart using Google Charts API

To display both actual values and percentages on a Google Pie Chart, simply use the pieSliceText configuration option and set its value to value-and-percentage. This powerful setting lets you show a combination of numerical data and percentage share on each slice, making your chart both informative and visually clear. Take a look at the example below to see this in action. Check this out

The Markup

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <div id="chart" style="width:900px; height:500px;"></div> 
</body>

The Script

<script>
    // VISUALIZATION API AND THE PIE CHART PACKAGE.
    google.charts.load("visualization", "1", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(DrawPieChart);

    function DrawPieChart() {
        // DEFINE AN ARRAY OF DATA.
        var arrSales =
        [
            ['Month', 'Sales Figure'],
            ['JAN', 21],
            ['FEB', 56],
            ['MAR', 14],
            ['APR', 61],
            ['MAY', 45]
        ];

        // SET CHART OPTIONS.
        var options = {
            title: 'Monthly Sales',
            is3D: true,
            pieSliceText: 'value-and-percentage'
        };

        var figures = google.visualization.arrayToDataTable(arrSales);

        // WHERE TO SHOW THE CHART (DIV ELEMENT).
        var chart = new google.visualization.PieChart(document.getElementById('chart'));

        // DRAW THE CHART.
        chart.draw(figures, options);
    }
</script>

See this demo

See the options variable in the script and see how I have used "pieSliceText" option. I have an array with "month" and "sales figures" (in numbers). When you load the page without using the pieSliceText option, it will show the "percentage" (of total values) on each slice. This is its default behavior.

Note: If you are using dynamic data for your Google charts, you’ll have to define this option.

Now, create interactive and animated Graphs (charts) using Google Chart API.

Configuration Option pieSliceText

The configuration option "pieSliceText" is used to define the content of the text displayed on the slice. You can define it using "four" values.

• 'percentage': Shows the percentage of the slice size. For example,

var options = {
    pieSliceText: 'percentage'
};

• 'value': Shows values in each slice. For example, pieSliceText: 'value'

• 'label': The name of each slice. The name of label is also shown at right side of the chart. See the first image above.

var options = {
    pieSliceText: 'label'
};

• 'none': Use this option to hide texts on the slices. Show nothing if you wish.

• 'value-and-percentage': Finally, you can use this option to show both "percentage" and "value" on each slice. Like I have used in my example above.

var options = {
    pieSliceText: 'value-and-percentage'
};

See this demo

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes

Make Charts online using our Graph Maker:

Transform raw JSON data into dynamic, interactive visualizations with ease! Using this powerful charting tool, you can generate a wide range of charts - Pie Charts, Line Graphs, Column Charts, and more - all in real time.
Turn raw JSON data into meaningful charts.

Try the Graph Maker ➪

← PreviousNext →