Bug when annotations on yref = 'y2' and traces are on 'y'

plotly.js
1

Hi,

I noticed that if my traces are on y axis and I put one annotation on y2, traces are gone from the chart and not visible. Here is a small example. If yref: ‘y’ everything is ok, but with yref: ‘y2’ traces are gone and y and y2 are on the left side. Am I doing something wrong or this is a bug.

        var trace1 = {
            x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
            y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
            type: 'scatter'
        };
        var trace2 = {
            x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
            y: [0, 4, 5, 1, 2, 2, 3, 4, 2],
            type: 'scatter'
        };
        var data = [trace1, trace2];
        var layout = {
            showlegend: false,
            annotations: [
                {
                    x: 2,
                    y: 5,
                    xref: 'x',
                    yref: 'y2',
                    text: 'Annotation Text',
                    showarrow: true,
                    arrowhead: 7,
                    ax: 0,
                    ay: -40
                }
            ]
        };
        Plotly.newPlot(element, data, layout);

Thank you

2

image
image949×452 3.19 KB

3

You do not have a second yaxis defined at all. Both of your traces use the first y-axis. Try adding one to the layout like this and you should be closer to what you expect:

  yaxis2: {
    side: 'right',
    autoshift: true,
    overlaying: 'y',
  }

But you should probably also use this axis for one of your traces by referencing this new axis from your trace: yaxis: 'y2'. Otherwise the annotation and the datapoints won’t match.

hth,
Martin