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>