Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Pie Chart

Pie charts are used to draw pie based charts.

A pie chart is rendered within the browser using SVG or VML.

Like all Google charts, pie charts display tooltips when the user hovers over the data.

Basic Pie Chart

The following example shows how to draw a basic pie chart, using google charts API:

Example Explained

First add a <div> element with the id "piechart" and set width and height:

<!DOCTYPE html> <html lang="en-US"> <body> <div id="piechart" style="width:100%; height:350px;"></div> </body> </html>

Then add a reference to the Chart API:

<script src=""></script>

Finally add a JavaScript function:

// Load the corechart package and set a callback google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 10], ['Eat', 1], ['TV', 2], ['Gym', 1], ['Sleep', 8], ['Timepass', 2] ]); // Set chart options var options = { title: 'My Daily Activities' }; // Display the chart inside the <div> element with id="piechart" var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); }

3D Pie Chart

If you set is3D: true option, your pie chart will be drawn as though it has three dimensions.

// Set chart options var options = { title: 'My Daily Activities', is3D: true };
Run code

Donut Chart

A donut chart is a pie chart with a hole in the center. You can create donut charts with the pieHole option.

// Set chart options var options = { title: 'My Daily Activities', pieHole: 0.4 };
Run code

Exploding Slices

You can separate pie slices from the rest of the chart with the offset property of the slices option.

To separate a slice, create a slices object and assign the appropriate slice number an offset between 0 and 1.

// Set chart options var options = { title: 'Indian Language Use', legend: 'none', pieSliceText: 'label', slices: { 4: {offset: 0.2}, 12: {offset: 0.3}, 14: {offset: 0.4}, 15: {offset: 0.5}, } };
Run code