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)