title: Plotly.js Chart Annotations not aligned
body: <p>I have a heatmap made with plotly.js. </p>
  
  <p>Everything seems to work fine, however the annotations are all on one side. 
  resistance
  I have a very similar heatmap with the <strong>exact</strong> <strong>same</strong> layout properties and everything works, including the annotations. </p>
  
  <p>This is the "broken" <a href="http://jsfiddle.net/u27r8gq5/1/" rel="nofollow noreferrer">jsfiddle</a>
  And <a href="http://jsfiddle.net/7f8bhptm/" rel="nofollow noreferrer">this</a> is the one working fine.</p>
  
  <p>I really can't figure out what I'm missing.</p>
  
  <p>The <code>layout</code> is identical on both (the working one uses strings but I also tried with <code>String(catVar</code> and <code>String(i.channel)</code> but nothing). </p>