Add label in the middle of Google pie chart donut

Question

I am using the google charts library to create donut charts. I wanted to know if it was possible to add a label in the middle of my donut chart just as this:

I checked in the google description of options and couldn't find anything. here is how i generate my charts.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load("visualization", "1", {packages:["corechart"]});
    google.charts.setOnLoadCallback(init);    
    function drawChart(myID,titler,known,unknown) {
        var data = google.visualization.arrayToDataTable([
          ['Knowledge', 'Out of 10'],
          ['Known',     known],
          ['Unknown',      unknown]
        ]);
        var options = {
          title: titler,
          pieHole: 0.7,
          colors: ['#000000', '#cdcdcd'],
          pieSliceText: 'none',
          legend:{position: 'none'},
          tooltip:{text:'percentage'},
          tooltip:{textStyle:{fontSize: 12}}
        };

        var chart = new google.visualization.PieChart(document.getElementById(myID));
        chart.draw(data, options);      
      } 
      function init(){
          drawChart('donutchart1','VB.NET',8,2);
          drawChart('donutchart2','Javascript',4,6);
      }
</script>

And my HTML to style my output:

    <table class="Charts">
        <tr>
            <td><div id="donutchart1" style="width: 256px; height: 256px;"></div></td>
            <td><div id="donutchart2" style="width: 256px; height: 256px;"></div></td>
        </tr>
    </table>

Undulate

Answer 1

You can add an overlay div, centered on each donut chart, and set the following style attributes:

For the table cell:

• position: relative;

For the overlay div:

• position: absolute;
• width: same as the donut width
• line-height: same as the donut height
• text-align: center;

The attribute position: relative is set on the table cell so that the absolute position of the overlay div is relative to the cell. The text-align attribute centers the text horizontally, the line-height attribute centers the text vertically.

google.charts.load("visualization", "1", { packages: ["corechart"] });
google.charts.setOnLoadCallback(init);
function drawChart(myID, titler, known, unknown) {
    var data = google.visualization.arrayToDataTable([
        ['Knowledge', 'Out of 10'],
        ['Known', known],
        ['Unknown', unknown]
    ]);
    var options = {
        title: titler,
        pieHole: 0.7,
        colors: ['#000000', '#cdcdcd'],
        pieSliceText: 'none',
        legend: { position: 'none' },
        tooltip: { text: 'percentage' },
        tooltip: { textStyle: { fontSize: 12 } }
    };

    var chart = new google.visualization.PieChart(document.getElementById(myID));
    chart.draw(data, options);
}
function init() {
    drawChart('donutchart1', 'VB.NET', 8, 2);
    drawChart('donutchart2', 'Javascript', 4, 6);
}

.donutCell
{
    position: relative;
}

.donutDiv
{
    width: 256px;
    height: 256px;
}

.centerLabel
{
    position: absolute;
    left: 2px;
    top: 2px;
    width: 256px;
    line-height: 256px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    color: maroon;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<table class="Charts">
    <tr>
        <td class="donutCell">
            <div id="donutchart1" class="donutDiv"></div>
            <div class="centerLabel">8/10</div>
        </td>
        <td class="donutCell">
            <div id="donutchart2" class="donutDiv"></div>
            <div class="centerLabel">4/10</div>
        </td>
    </tr>
</table>

Fortyfour

Hello,This works like a charm i tweaked it a bit and fits perfectly for what i want to do. thank you a lot for taking the time to help me out and teaching me ths positioning in this case. – Undulate

Answer 2

Google Visualization uses SVG for the graphics, so if we want to reposition the SVG <text> we have a number of JavaScript methods at our disposal. If we use the Dev Console and dig into the charts, we will finally reach the lowest level that being the <text> element. Notice there's 2 attributes that look like XY coordinates. I wrote a function called centerText() that'll manipulate those particular attributes, and AFAIK, should be able to navigate through most Google Visualization Chart SVG layouts.

There's a bunch of commented out lines in this function because I was going to have it calculate horz/vert center, but I found out that the <text> tag doesn't have a <length>, so I'll leave that when I have more time.

    function centerText(chart, idx, X, Y) {
      idx === 'undefined' || idx === null || idx === NaN ? 0 : idx;
      var cht = document.querySelector(chart);
      var txt = document.querySelectorAll(chart + " text");
      //var chW = cht.width/2;
      //var chH = cht.height/2;
      //var txW = txt[idx].width/2;
      //var txH = txt[idx].height/2;
      //var W = chW - txW;
      //var H = chH - txH;
      txt[idx].setAttribute('x', X);
      txt[idx].setAttribute('y', Y);
    }
/* chart [string][REQUIRED  ]: Id of chart - ex. #donutchart1
|| idx   [number][DEFAULT: 0]: Index number of <text> 
|| X     [number][REQUIRED  ]: Set X coordinate of <text>
|| Y     [number][REQUIRED  ]: Set Y coordinate of <text>
*/

SNIPPET

<!DOCTYPE html>
<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>
  <style>
  </style>
</head>

<body>
  <table class="Charts">
    <tr>
      <td>
        <div id="donutchart1" style="width: 256px; height: 256px;"></div>
      </td>
      <td>
        <div id="donutchart2" style="width: 256px; height: 256px;"></div>
      </td>
    </tr>
  </table>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load("visualization", "1", {
      packages: ["corechart"]
    });
    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");
      //var chW = cht.width/2;
      //var chH = cht.height/2;
      //var txW = txt[idx].width/2;
      //var txH = txt[idx].height/2;
      //var W = chW - txW;
      //var H = chH - txH;
      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>

Marpet

Hello thanks a lot for taking the time to reply but that is not quite what i was looking for as i wanted to add text in the donut not just move it. howerver thanks to you i understood a lot more the visualization process the api uses with SVG. – Undulate

@ConnorsFan's solution is the way to go then. Overlays are also documented here: developers.google.com/chart/interactive/docs/overlays , but it isn't as helpful as CF's. – Marpet

Answer 3

I'd just like to automate the @zer00ne answer, so that we don't have to set the X and Y manually. The text will always be in the center regardless the length of the text

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>Google Visualization Dohnut Chart Text Position</title>
    <style>
      
      #test_font{
          position: absolute;
          visibility: hidden;
          height: auto;
          width: auto;
          white-space: nowrap;
      }
      
    </style>
</head>
<body>
    <table class="Charts">
        <tr>
            <td>
                <div id="donutchart1" style="width: 256px; height: 256px;"></div>
            </td>
            <td>
                <div id="donutchart2" style="width: 256px; height: 256px;"></div>
            </td>
        </tr>
    </table>
    <div id="test_font"></div>
    <script src="https://www.gstatic.com/charts/loader.js">
    </script> 
    <script>
        google.charts.load("visualization", "1", {
          packages: ["corechart"]
        });
        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) {
        var cht = document.querySelector(chart);
          var txt = document.querySelector(chart + " text");
          var test_txt = document.querySelector('#test_font');
          test_txt.innerHTML = txt.innerHTML;
          test_txt.style.fontFamily = txt.getAttribute('font-family');
          test_txt.style.fontSize = txt.getAttribute('font-size') + 'px';
          test_txt.style.fontWeight = txt.getAttribute('font-weight');
          var X = (cht.clientWidth-test_txt.clientWidth)/2;
          var Y = ((cht.clientHeight-test_txt.clientHeight)/2) + 1*document.querySelectorAll(chart + " rect").item(1).getAttribute('height');
          txt.setAttribute('x', X);
          txt.setAttribute('y', Y);
        }

        function init() {
          drawChart('donutchart1', 'VB.NET', 8, 2);
          drawChart('donutchart2', 'Javascript', 4, 6);
          centerText('#donutchart1');
          centerText('#donutchart2');
        }
    </script>
</body>
</html>

Vivienviviene