Add label in the middle of Google pie chart donut

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>


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>

Tags:

Javascript

Charts

Google Visualization

Recent Posts