Plotly annotation not showing up at correct location
<p>I have a timeline that is basically an x-axis of dates, and annotations for events at particular dates. They are not evenly spaced, because I want to show events at particular dates. I have specified one of the dates as the x-position of the annotation, but it's not showing up at the right place. Here is a fiddle: <a href="https://jsfiddle.net/abalter/98phb124/" rel="nofollow">https://jsfiddle.net/abalter/98phb124/</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="myDiv" style="width: 600px; height: 300px;"&gt;&lt;/div&gt;
&lt;div id="hoverinfo" style="margin-left:80px;"&gt;&lt;/div&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>var myPlot = document.getElementById('myDiv');
var hoverinfo = document.getElementById('hoverinfo');

var CA199 = 
    {
        x: ["7/1/2015","7/13/2015", "8/1/2015", "9/1/2015", "9/11/2015","10/1/2015"],
        y: ["", "", "", "", "", ""],
    type: 'linear',
    mode: 'markers'
    };

var data = [CA199];

var layout =
    {
        title: "Title",
        height: 0,
    xaxis:
    {
      tickfont:
      {
        color:"rgb(107, 107, 107)",
        size:11
      },
      ticks:"outside",
      tickwidth:1,
      tickangle:40,
      ticklen:5,
      showticklabels:true,
      showline:true,
      type:"scatter",
      autorange:true,
      tickmode:"auto",
      showgrid: false
        },
    yaxis:
    {
      autorange: true,
      showgrid: false,
      zeroline: false,
      autotick: false,
      ticks: '',
      showticklabels: false,
      showline: false,
    },
        annotations:
    [
      {
        x: "09/11/2015", 
        y: 0, 
        align: "center", 
        arrowcolor: "rgba(255, 0, 255, 0.53)", 
        arrowhead: 5, 
        arrowsize: 1, 
        ax: -0, 
        ay: -50, 
        bgcolor: "rgba(255, 0, 255, 0.29)", 
        bordercolor: "rgba(0, 0, 0, 0)", 
        borderpad: 3, 
        borderwidth: 0, 
        font: {size: 14}, 
        text: "CA12-3: 144", 
        textangle: 0
        }
        ]
    };

Plotly.plot
(
  'myDiv',
  data,
  layout,
  {scrollZoom: true}
);

myPlot
  .on('plotly_hover', function(data)
    {
      var infotext = data.points.map(function(d)
      {
        return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
      });
      hoverinfo.innerHTML = infotext.join('');
    })
  .on('plotly_unhover', function(data)
    {
        hoverinfo.innerHTML = '';
    });
</code></pre>