title: Highcharts - programmatically draw a line or graphic between two related points
body: <p>I often have charts that require a design element like a curly brace to call attention to call attention to a range or comparison in a graph, such as the y-difference in two points at the end of a graph. </p>
  
  <p>My first take is that this would be a job for Highcharts <code>Renderer</code> API. Load the graph, and run a callback that adds an image (or line, shape, whatever) via <code>chart.renderer.image(...)</code>  or similar. </p>
  
  <p>That's the approach I have started down, but I'm just missing how to get the coordinates for chart data points within the callback. Here's a working <a href="http://codepen.io/ericpedia/pen/bdmop" rel="nofollow">codepen</a> of the code below. What doesn't work is that there's no logic to give it proper placement on the canvas (suppose I want the bracket to go from the final top point to the final bottom point)</p>
  
  <pre><code>$('#container').highcharts({
      data: { table: document.getElementById('datatable') },
      chart: { type: 'line' }, 
      title: { text: 'Data extracted from a HTML table in the page'
      }
  }, function(chart){
  
    var img = 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Curly_bracket_right.svg/30px-Curly_bracket_right.svg.png';
  
    // How can I populate these values?
    var x = 0; // should programmatically get x-position of last point
    var y = 0; // should programmatically get y-position of last point
    var h = 100; // should programmatically get distance between y-position of top and bottom points
    var w = 50;
  
    chart.renderer.image( img, x, y, w, h ).add();
  });
  </code></pre>
  
  <p>Is there a straightforward way to populate those values? Or is there a better way to do this entirely?</p>