title: Flot Axes' p2c Calculation Offset
body: <p>I'm using flots <code>drawOverlay</code> hook to help annotate a chart.  When I calculate my y axis coordinates from a position using <code>p2c</code>, I noticed that there is a slight offset. Poking around it seems that if I add back in the <code>yaxis.box.top</code>, things line up but I'm not sure if this is the correct approach.</p>
  
  <p>Fiddle <a href="http://jsfiddle.net/kWvEw/1/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Picture off what I'm talking about:</p>
  
  <p><img src="https://i.stack.imgur.com/COm8u.png" alt="enter image description here"></p>
  
  <p>Code:</p>
  
  <pre><code>$(function () {
  
   overlayThresholdHook = function(plot, ctx) {
  
          var threshold = plot.getOptions().thresholdY;
  
          if (threshold == -1) return;
  
          var axes = plot.getAxes();
          var xStart = axes.xaxis.box.left;
          var xStop = axes.xaxis.box.width + xStart;
          var yCor = axes.yaxis.p2c(threshold);// + axes.yaxis.box.top;
  
          ctx.font = '9pt Arial';
          ctx.strokeStyle = 'blue';
          ctx.fillStyle = 'blue';
          ctx.lineWidth = 2;
          ctx.textAlign = 'left';
          ctx.textBaseline = 'middle';
  
          ctx.fillText(threshold+'',xStart,yCor);
  
          ctx.beginPath();
          ctx.moveTo(xStart+ctx.measureText(threshold+'').width+2, yCor);
          ctx.lineTo(xStop, yCor);
          ctx.stroke();
      }    
  
      var options = { legend: {show: false}, yaxis: {min: -120, max: 150, show: true}, thresholdY: 100, hooks: {drawOverlay: [overlayThresholdHook]}   };
      var plot0 = $.plot($("#plot0"), [ {"data":[[1,-0.998195931084865],[45,2.26027181085055]],"color":"#C0D800","points":{"symbol":"circle"}}], options);
      plot0.triggerRedrawOverlay();
  });
  </code></pre>