JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="tooltip"></div>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
CSS
#tooltip{
position:absolute;
z-index:100;
border:1px solid black;
background-color:white;
display:none;
}
JavaScript
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
lineWidth:20
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'onmousemove', mouseMoveHandler);
chart.draw(data, options);
var lines = [];
for (var propertyName in chart.$m.mZ) {
var id = propertyName.split('#');
var coordinate = chart.$m.mZ[propertyName].center;
if (typeof lines[id[1]] === "undefined") {
lines[id[1]] = [];
}
lines[id[1]].push({x: coordinate.x, value: parseFloat(data.Ad[parseInt(id[2])][parseInt(id[1]) + 1].Pe)});
}
function mouseMoveHandler(e) {
var target = e.targetID.split("#");
if (target[0] === "line") {
var currentLine = lines[parseInt(target[1])];
var count = currentLine.length;
for (var i = 0; i < count; i++) {
if (currentLine[i].x >= e.x) {
var slope = (currentLine[i].value - currentLine[i - 1].value) / (currentLine[i].x - currentLine[i - 1].x);
var value = ((e.x - currentLine[i - 1].x) * slope + currentLine[i - 1].value).toFixed(2);
$("#tooltip").css('left', e.x + "px").css('top', (e.y - 20) + "px").html(value).show();
break;
}
}
}
}
}