JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
<div id="graph"></div>
CSS
.selection_line
{
stroke: rgba(0, 0, 0, 0.6);
shape-rendering: crispEdges;
}
JavaScript
$(function() {
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
});
function drawChart() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
// add an "annotation" role column to the domain column
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'y');
// add 100 rows of pseudorandom data
var y = 50;
for (var i = 0; i < 100; i++) {
y += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
data.addRow([i, null, y]);
}
// add a blank row to the end of the DataTable to hold the annotations
data.addRow([null, null, null]);
// get the index of the row used for the annotations
var annotationRowIndex = data.getNumberOfRows() - 1;
var options = {
height: 400,
width: 600
};
// create the chart
var chart = new google.visualization.LineChart(document.getElementById('graph'));
// draw the chart
chart.draw(data, options);
// Handler for .ready() called.
var graph = d3.select('svg');
var line = graph.append('line')
.attr('transform', 'translate(100, 50)')
.attr({'x1': 0, 'y1': 0, 'x2': 400, 'y2': 0})
.attr('class', 'selection_line');
graph.on('mousemove', function() {
line.attr("y1", d3.event.y - 50);
line.attr("y2", d3.event.y - 50);
});
}