Q:

Display multiple vertical lines on graph at various positions

I want to draw vertical lines at points on the x axis in dygraphs. 
They should:

Span the entire y axis automatically, but not prevent other series from being automatically zoomed in on the y axis when manually zoomed to a range of the x axis
Be completely vertical
have no horizontal lines joining them

In that sense, a lot like having multiple extra axis lines drawn at random points.
But it would be helpful if they have the same features of regular series plots in that when it is hovered over, a label displays its value along the x axis.
In case it matters, they will be plotted on the same graph as other series lines, and may or may not have common x axis values with those series.
How might it be achieved? 

A:

A way to draw vertical lines, is to use the underlayCallback. It allows you to draw the background of the graph.
Here is a sample that draw 3 vertical lines at X=100, X=200 and X=500 :

<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<div id="div_g" style="width:400px; height:200px;"></div>
<script>
  // A basic sinusoidal data series.
  var data = [];
  for (var i = 0; i < 1000; i++) {
    var base = 10 * Math.sin(i / 90.0);
    data.push([i, base]);
  }

  new Dygraph(
    document.getElementById("div_g"),
    data, {
      labels: ['X', 'Y'],
      underlayCallback: function(canvas, area, g) {
        canvas.strokeStyle = 'red';
        var lines = [100, 200, 500];
        for (var idx = 0; idx < lines.length; idx++) {
          var canvasx = g.toDomXCoord(lines[idx]);
          var range = g.yAxisRange();
          canvas.beginPath();
          canvas.moveTo(canvasx, g.toDomYCoord(range[0]));
          canvas.lineTo(canvasx, g.toDomYCoord(range[1]));
          canvas.stroke();
          canvas.closePath();
        }
      }
    }
  );
</script>

