Fine tuning annotation position

plotly.js
1

I have a timeline consisting of dates on the x-axis and essentially no y-axis, but with annotations showing events at certain dates. I’m having trouble controlling where the annotation is relative to the axes. In particular, I would like to be able to set the height of the annotation above the x-axis, and have the arrow drop down just to the axis.

For some reason, not letting me link to my fiddle:

https:// jsfiddle. net/abalter/ 0rh8c5o0/

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

Setting a fake yaxis range should do the trick.

https://jsfiddle.net/etpinard/98phb124/7/

1 Like
3

That is great! Thanks.