Add label in the middle of Google pie chart donut - Javascript Google Chart

Javascript examples for Google Chart:Pie Chart

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

Description

Add label in the middle of Google pie chart donut

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta charset="UTF-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
      <title>Google Visualization Dohnut Chart Text Position</title> 
   </head> 
   <body> 
      <table class="Charts"> 
         <tbody>
            <tr> 
               <td> 
                  <div id="donutchart1" style="width: 256px; height: 256px;"></div> 
               </td> 
               <td> 
                  <div id="donutchart2" style="width: 256px; height: 256px;"></div> 
               </td> 
            </tr> 
         </tbody>
      </table> 
      <script src="https://www.gstatic.com/charts/loader.js"></script> 
      <script>
    google.charts.load("visualization", "1", {
      packages: ["corechart"]
    });//from  w  w  w  . ja va 2s . co m
    google.charts.setOnLoadCallback(init);
    function drawChart(chartID, heading, known, unknown) {
      var chart = new google.visualization.PieChart(document.getElementById(chartID));
      var data = google.visualization.arrayToDataTable([
        ['Knowledge', 'Out of 10'],
        ['Known', known],
        ['Unknown', unknown]
      ]);
      var options = {
        title: heading,
        pieHole: 0.7,
        colors: ['#000000', '#cdcdcd'],
        pieSliceText: 'none',
        legend: {
          position: 'none'
        },
        tooltip: {
          text: 'percentage'
        },
        tooltip: {
          textStyle: {
            fontSize: 12
          }
        }
      };
      chart.draw(data, options);
    }
    function centerText(chart, idx, X, Y) {
      var cht = document.querySelector(chart);
      var txt = document.querySelectorAll(chart + " text");
      txt[idx].setAttribute('x', X);
      txt[idx].setAttribute('y', Y);
    }
    function init() {
      drawChart('donutchart1', 'VB.NET', 8, 2);
      drawChart('donutchart2', 'Javascript', 4, 6);
      centerText('#donutchart1', 0, 112, 130);
      centerText('#donutchart2', 0, 106, 130);
    }
  
      </script>  
   </body>
</html>

Related Tutorials