Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

moveTraces does not work as expected if both Y and Y2 are used

In case I have multiple traces on chart and all of them used Y axis, everything is fine and it work as expected. However if I use both Y and Y2 axis, then Plotly will show first those from axis Y and then from axis Y2, which means that trace that use Y axis can not be on top of all others (if there is a trace which use Y2). On the other side order in legend is fine in both cases.

Is this a feature, bug or am I doing something wrong? Thank you.

Example:

    var trace1: PlotlyTrace = {
        x: [112, 150, 1000, 3000, 5000, 8000, 12000, 15000, 21120],
        y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
        name: 'blue',
        type: 'scatter',
        showlegend: true,
        line: {
            color: 'rgb(31, 119, 180)',
            width: 2,
            dash: 'dash'
        }
    }

    var trace2: PlotlyTrace = {
        x: [112, 150, 1000, 3000, 5000, 8000, 12000, 15000, 21120],
        y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
        name: 'orange',
        type: 'scatter',
        showlegend: true,
        line: {
            color: 'rgb(255, 127, 14)',
            width: 2,
            dash: 'solid'
        }
    }

    var trace3: PlotlyTrace = {
        x: [112, 150, 1000, 3000, 5000, 8000, 12000, 15000, 21120],
        y: [90, 80, 70, 60, 50, 60, 70, 80, 90],
        name: 'green',
        yaxis: 'y2',
        type: 'scatter',
        showlegend: true,
        line: {
            color: 'rgb(44, 160, 44)',
            width: 2,
            dash: 'solid'
        }
    };

    return [trace1, trace2, trace3];

If I use those traces, trace3 (Y2) will always be in front of all others no mattter what.
After this command trace1 will be in front of trace2, but not in front of trace3.
Plotly.moveTraces(this.chartElement, 0);

On the other side legend will show fine
orange (trace2)
green (trace3)
blue (trace1)

That’s correct. yaxis y will always be at the bottom, and y2 below y3 and so on. To get around this behaviour, I’d recommend placing y yaxis on the right side and the y2 yaxis on the left.