Display all labels in Google Charts donut chart - Javascript Google Chart

Javascript examples for Google Chart:Donut Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Donut Chart

Description

Display all labels in Google Charts donut chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Donut chart example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#i4 svg g text{//  w  ww .j  a  v  a  2 s . c  om
   font-size:11px !important;
}


      </style> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
      <div id="i1" style="width: 900px; height: 500px;"></div> 
      <div id="i2" style="width: 900px; height: 500px;"></div> 
      <div id="i3" style="width: 900px; height: 500px;"></div> 
      <div id="i4" style="width: 900px; height: 500px;"></div> 
      <div id="i5" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
      google.setOnLoadCallback(drawChart);
      function drawChart() {
          var data = google.visualization.arrayToDataTable([
              ['', 'Percentage'],
              ['', 41.2],
              ['', 29.4],
              ['', 17.6],
              ['', 5],
              ['', 4.9],
              ['', 1.4],
              ['', 0.5],
              ]);
          var chart;
          chart = new google.visualization.PieChart(document.getElementById('i1'));
          chart.draw(data, {
              pieHole: 0.5,
              pieSliceTextStyle: {
                  color: 'black',
              },
              legend: 'none'
          });
          chart = new google.visualization.PieChart(document.getElementById('i2'));
          chart.draw(data, {
              sliceVisibilityThreshold: 0.05,
              pieHole: 0.5,
              pieSliceTextStyle: {
                  color: 'black',
              },
              legend: 'none'
          });
          chart = new google.visualization.PieChart(document.getElementById('i3'));
          chart.draw(data, {
              pieHole: 0.5,
              pieSliceTextStyle: {
                  color: 'black',
                  fontSize:11
              },
              legend: 'none'
          });
          chart = new google.visualization.PieChart(document.getElementById('i4'));
          chart.draw(data, {
              pieHole: 0.5,
              pieSliceTextStyle: {
                  color: 'black',
                  fontSize:0.5
              },
              legend: 'none'
          });
      }

      </script>  
   </body>
</html>

Related Tutorials