Why do plotly annotations move when I change the scale?

plotly.js
1

Hi, I am very new plotly (and this is my first post here), so please bear with me in case I am asking smth obvious.

The question: for horizontal bar chart with annotations, created by stripping the example from plotly.com like this:

var xSavings = [1.3586, 2.2623000000000002, 4.9821999999999997, 6.5096999999999996,
  7.4812000000000003, 7.5133000000000001, 15.2148, 17.520499999999998
];


var ySavings = ['Japan', 'United Kingdom', 'Canada', 'Netherlands', 'United States', 'Belgium', 'Sweden', 'Switzerland'];


var trace1 = {
  x: xSavings,
  y: ySavings,
  xaxis: 'x1',
  yaxis: 'y1',
  type: 'bar',
  marker: {
    color: 'rgba(50,171,96,0.6)',
    line: {
      color: 'rgba(50,171,96,1.0)',
      width: 1
    }
  },
  name: 'Household savings, percentage of household disposable income',
  orientation: 'h'
};


var data = [trace1];

var layout = {
  title: 'Household Savings & Net Worth for Eight OECD Countries',
  xaxis1: {
    range: [0, 22],
    domain: [0, 0.5],
    zeroline: false,
    showline: false,
    showticklabels: true,
    showgrid: true
  },
  legend: {
    x: 0.029,
    y: 1.238,
    font: {
      size: 10
    }
  },
  margin: {
    l: 100,
    r: 20,
    t: 200,
    b: 70
  },
  width: 600,
  height: 600,
  paper_bgcolor: 'rgb(248,248,255)',
  plot_bgcolor: 'rgb(248,248,255)',
  annotations: [
    {
      xref: 'paper',
      yref: 'paper',
      x: -0.2,
      y: -0.109,
      text: 'OECD ' + '(2015), Household savings (indicator), ' + 'Household net worth (indicator). doi: ' + '10.1787/cfc6f499-en (Accessed on 05 June 2015)',
      showarrow: false,
      font:{
        family: 'Arial',
        size: 10,
        color: 'rgb(150,150,150)'
      }
    }
  ]
};

for ( var i = 0 ; i < xSavings.length ; i++ ) {
  var result = {
    xref: 'x1',
    yref: 'y1',
    x: xSavings[i]+2.5,
    y: ySavings[i],
    text: xSavings[i] + '%',
    font: {
      family: 'Arial',
      size: 12,
      color: 'rgb(50, 171, 96)'
    },
     showarrow: false,
  };
  layout.annotations.push(result);
}

Plotly.newPlot('myDiv', data, layout);

the annotations sit nicely by the bars, however when I change (enlarge) the range of the X axis from [0,22] to say [0,50] the annotations move and are partially over the bars, even though there is more space to use. Why is that? Or am I missing some important point here?

Thank you anyone for any help.

2

Hi @marcel.svitalsky welcome to the forums.

Try changing the reference of the annotations to x1 and y1 or x and y. I’m not sure which one is the correct one right now.

More information in this post (by the looks of it at least)