title: Dygraphs - add vertical line
body: <p>I am using dygraph to chart temperature readings over a period of time.
  I am looking to add 2 lines to the y-axis that represent high/low thresholds.</p>
  
  <p>This is currently being achieved through the use of 2 additional constant data series but I suspect there is a better way.</p>
  
  <p>An <code>underlayCallback</code> appears to be the better option, but I am not clear on how to use the <code>canvas.fillRect</code> and <code>g.toComCoords</code> properties to draw the lines.</p>
  
  <p>Currently working through the sample below (<a href="http://dygraphs.com/tests/highlighted-region.html" rel="nofollow">http://dygraphs.com/tests/highlighted-region.html</a>) which is rendering a vertical line.
  Any assistance is appreciated.</p>
  
  <pre><code>var g = new Dygraph(
            document.getElementById("div_g"),
            data,
            {
              labels: ['X', 'Est.', 'Actual'],
              animatedZooms: true,
              underlayCallback: function(canvas, area, g) {
                var bottom_left = g.toDomCoords(300, -20);
                var top_right = g.toDomCoords(301, +20);
  
            var left = bottom_left[1];
            var right = top_right[0];
  
            canvas.fillStyle = "rgba(255, 0, 0, 1)";
            canvas.fillRect(right, area.y, 1, area.h);
          }
  
        }
    );
  </code></pre>
  
  <p>For anyone that is interested, used the following to achieve the desired result:</p>
  
  <pre><code>underlayCallback: function(canvas, area, g) {
            var LowCoords = g.toDomCoords(0, 2.25);   
            var HighCoords = g.toDomCoords(0, 4);
  
            var high = HighCoords[1];
            var low = LowCoords[1];
  
            canvas.fillStyle = 'red';
            canvas.fillRect(area.x, low, area.w, 2);
            canvas.fillStyle = 'blue';
            canvas.fillRect(area.x, high, area.w, 2);
            }
  </code></pre>