Google Pie Chart

Fruit

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
}

<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 and CSS

Google Pie Chart