Highcharts chart.renderer.images not lining up with platbands

Question

I am adding images using chart.renderer.image. I would like the images to line up with the beginning of each plotBand. I have the plotBand from position in axis units. However when I call toValue the images do not line up.

https://jsfiddle.net/uxeL76a9/23/

  for (var i = 0; i < plotBands.length; ++i) {
  var artist = plotBands[i];
  var xPos = chart.xAxis[0].toValue(artist['from'], true);
...

Answer 1

Your chart is inverted, so axes are swapped, and you have small mess with toValue(), see fixed code:

 var xPos = chart.xAxis[0].toValue(artist['from'], true);

Should be:

var xPos = chart.yAxis[0].toPixels(artist.from);

Working demo: https://jsfiddle.net/uxeL76a9/40/