绘图注释未显示在正确的位置

我有一个基本上是日期的x轴的时间线，以及特定日期事件的注释。它们的间隔不均匀，因为我想显示特定日期的事件。我已经指定了其中一个日期作为注释的x位置，但它没有显示在正确的位置。这是一把小提琴：https://jsfiddle.net/abalter/98phb124/

HTML:

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

Javascript：

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 = '';
    });