title: Dygraphs drawing a vertical line at mouse cursor
body: <p>I would like to draw a full height vertical line on a Dygraph plot that follows the precise x position of the cursor (note: I would like it to follow the cursor between points, not just snap to points)</p>
  
  <p>Is there a callback option provided by Dygraphs that would allow this?</p>
  
  <p>As a bonus, is it possible to make it play nicely with synchronisation?</p>
  
  <p>So far I have tried adding a mousemove event listener to the canvas to draw a line on every mousemove event. This ends up just clogging up the plot because I can't clear the previous drawn lines, they just amass with every mousemove event!</p>
  
  <p>Any help much appreciated.</p>
  
  <p>Cheers,</p>
  
  <p>P</p>
  
  <p>edit: I have possibly made some progress. This is hacky but does give the visual effect of a line following the cursor. However, it also overwrites the point highlighting behaviour of Dygraphs. I still need the point highlighting for synchronisation and display of closest point value in the legend.</p>
  
  <pre><code>const plot = new Dygraph(...)
  
  function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    return [x, y]
  }
  
  canvas.addEventListener('mousemove', function(e) {
    // redraw the plot
    const xrange = plot.xAxisRange();
    plot.updateOptions({dateWindow: xrange});
  
    // add a line
    const [x, y] =getCursorPosition(canvas, e);
    const { height } = canvas;
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, height);
    ctx.closePath();
    ctx.stroke();
  });
  </code></pre>