What are Google Pie Charts?

Google Pie Charts are easy-to-use tools from the free Google Charts library. They help you create interactive pie charts on websites using simple JavaScript and HTML. You can also style them with custom CSS to match your design. Here is an example:

<script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Fruit'],
  ['Apples', 26],
  ['Pears', 9],
  ['Berries', 10],
  ['Grapes', 11]
  ]);

var options = {
  is3D: true,
  backgroundColor: 'transparent',
  
  chartArea:{
  left: 10,
  top: 10,
  width: '100%',
  height: '80%'
  },

legend: { 
  position: 'bottom', 
  alignment: 'center' 
  },
  
  };
  
  var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
  chart.draw(data, options);
  }
  
  $(window).resize(function(){
  drawChart();
  }); 
</script>

HTML

<div class="chart-container">
 <div class="chart-title">Fruit</div>
   <div id="piechart_3d"></div> 
</div>

CSS

.chart-container {
  margin: 0 auto;
  max-width: 890px; 
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(to top, 
  #ffffff 0%, #dfe9f3 100%);
  border-radius: 6px
}

.chart-title {
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 10px 0 0 0
}

#piechart_3d {
  height: 100%;
  width: 100%;
  min-height: 260px
}

HTML and CSS

Google Pie Chart

What are Google Pie Charts?

About the author