title: Annotating Flot chart based on y-axis position
body: <p>I'm trying to annotate a Flot.js chart; based on <a href="http://www.flotcharts.org/flot/examples/annotating/index.html" rel="nofollow">this</a> example, this is done by adding an absolutely-positioned div which floats over the canvas, which is fine when you have a single chart with a fixed width and static content. The problem is that this approach breaks under two conditions: one, when working with a fluid-width layout (using the Resize plugin), and two, when dynamically redrawing the chart object at varying sizes, say, such as <a href="http://www.flotcharts.org/flot/examples/visitors/index.html" rel="nofollow">when implementing a zooming overview chart</a>.</p>
  
  <p>For my question specifically, I need to draw in the annotations at certain parts of the Y-Axis. I know I can add a vertical bar to mark these points fairly easily by using markings, but that doesn't really help tell my program where to draw in the annotation markings. I suspect that it might be a matter of adding a custom hook at the Drawing phase of the chart, but I'm not completely sure; what's the best way of going about this?</p>