Dygraphs - add vertical line

Question

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.

This is currently being achieved through the use of 2 additional constant data series but I suspect there is a better way.

An underlayCallback appears to be the better option, but I am not clear on how to use the canvas.fillRect and g.toComCoords properties to draw the lines.

Currently working through the sample below (http://dygraphs.com/tests/highlighted-region.html) which is rendering a vertical line. Any assistance is appreciated.

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);
        }

      }
  );

For anyone that is interested, used the following to achieve the desired result:

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);
          }

Answer 1

Here is a proof-of-concept plug-in that does exactly this:

https://github.com/danvk/dygraphs/pull/215

You can use the plug-in even if it's not part of the main source base, but I suggest renaming the plug-in since it's using the Dygraph namespace.