I currently have a Google chart similar to the one shown below.
Now, I am looking to reposition the tooltip to the top of the chart without it being dependent on the location of my mouse cursor.
How can I achieve this?
Below is the code snippet:
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Time');
chartData.addColumn('number', 'Average Score');
chartData.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });
chartData.addRows(data);
var options = {
chartArea: { left: 0, top: 100, width: "100%", height: "100%" },
title: '',
opacity: 100,
backgroundColor : {fill: '#000'},
hAxis: {
textPosition: 'none',
titleTextStyle: {color: '#333'},
titleTextStyle: {color: '#2902A3'},
},
vAxis: {
textPosition: 'none',
opacity: 100,
minValue: 0,
gridlines: { color: '#0D2B56', count: 10 },
baselineColor: 'white',
},
series:{
0:{
color: '#3C93FF',
areaOpacity: '0.68'
}
},
crosshair: {
orientation: 'vertical',
trigger: 'focus',
color: '#fff'
},
legend: 'none',
tooltip: {isHtml: true},
};
google.load("visualization", "1", { packages: ["corechart"] });
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(chartData, options);
I have also implemented the following function to generate the content for tooltips:
var createToolTip = function (name, value) {
return '<div class="googletooltip" ><span>' + name + ':</span><span style="padding-left:20px" >' + value + '</span></div>';
}
Additionally, here is the accompanying style:
.googletooltip{
color:#fff;
border-style: solid;
border-width: 2px;
border-color: #3882C4;
background: #000;
padding:2px 15px 2px 15px;
font-weight: bold;
}
Thank you very much.