Changing tooltip position in Google Chart
I have a google chart that I am using where I have specified the type of the tooltip as html in my options, for example:
tooltip: { isHtml: true }
Setting up the tooltip to look the way I want was easy, but getting the tooltip in the right position is surprisingly difficult. After searching a lot, I found this answer on positioning tooltips , but it can't seem to work.
My javascript (besides the parameters) for creating the chart and determining the position of the tooltip looks like this:
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
var container = document.querySelector('#chart_div > div:last-child');
function setPosition () {
var tooltip = container.querySelector('div.google-visualization-tooltip');
tooltip.style.top = 0;
tooltip.style.left = '-47px';
}
if (typeof MutationObserver === 'function') {
var observer = new MutationObserver(function (m) {
for (var i = 0; i < m.length; i++) {
console.log("mutation: " + m[i].type);
if (m[i].addedNodes.length) {
setPosition();
break; // once we find the added node, we shouldn't need to look any further
}
}
});
observer.observe(container, {
childList: true
});
} else if (document.addEventListener) {
container.addEventListener('DOMNodeInserted', setPosition);
} else {
container.attachEvent('onDOMNodeInserted', setPosition);
}
});
chart.draw(dataTable, options);
I'm using Google Chrome for testing right now, and if I put the debugger in a snippet typeof MutationObserver
, I go there and install an observer, but it never seems to be observed as I'm not even getting console messages.
Any help would be much appreciated. My html element with id chart_div
exists (and the chart is displayed there), so I'm not sure what I'm missing.
source to share
No one has answered this question yet
See similar questions:
or similar: