Open
Description
I was trying to create a plot, with 8 tracks divided in 2 subplots arranged in a grid, where 7 tracks share same x axis and one of them will have a different x axis. here is sample
var data = [{
x: [
0,
90,
180,
270,
],
y: [
0,
26,
408,
24,
],
type: "scatter",
yaxis: "y",
xaxis: "x",
name: "Channel 1",
showlegend: true,
visible: true,
marker: {
color: "rgba(76, 198, 233, 0.5)"
},
line: {
width: 2,
color: "rgba(76, 198, 233, 0.5)"
},
fillcolor: "rgba(76, 198, 233, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
518,
1212,
696,
9,
],
type: "scatter",
yaxis: "y3",
xaxis: "x",
name: "Channel 2",
showlegend: true,
visible: true,
marker: {
color: "rgba(239, 151, 191, 0.5)"
},
line: {
width: 2,
color: "rgba(239, 151, 191, 0.5)"
},
fillcolor: "rgba(239, 151, 191, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
174,
203,
38,
48,
],
type: "scatter",
yaxis: "y5",
xaxis: "x",
name: "Channel 3",
showlegend: true,
visible: true,
marker: {
color: "rgba(245, 150, 50, 0.5)"
},
line: {
width: 2,
color: "rgba(245, 150, 50, 0.5)"
},
fillcolor: "rgba(245, 150, 50, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
737,
307,
0,
96,
],
type: "scatter",
yaxis: "y7",
xaxis: "x",
name: "Channel 4",
showlegend: true,
visible: true,
marker: {
color: "rgba(218, 227, 109, 0.5)"
},
line: {
width: 2,
color: "rgba(218, 227, 109, 0.5)"
},
fillcolor: "rgba(218, 227, 109, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
3,
108,
314,
218,
],
type: "scatter",
yaxis: "y2",
xaxis: "x2",
name: "Channel 5",
showlegend: true,
visible: true,
marker: {
color: "rgba(178, 74, 195, 0.5)"
},
line: {
width: 2,
color: "rgba(178, 74, 195, 0.5)"
},
fillcolor: "rgba(178, 74, 195, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
202,
0,
72,
951,
],
type: "scatter",
yaxis: "y4",
xaxis: "x",
name: "Channel 6",
showlegend: true,
visible: true,
marker: {
color: "rgba(74, 211, 203, 0.5)"
},
line: {
width: 2,
color: "rgba(74, 211, 203, 0.5)"
},
fillcolor: "rgba(74, 211, 203, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
98,
303,
1146,
914,
],
type: "scatter",
yaxis: "y6",
xaxis: "x",
name: "Channel 7",
showlegend: true,
visible: true,
marker: {
color: "rgba(106, 155, 188, 0.5)"
},
line: {
width: 2,
color: "rgba(106, 155, 188, 0.5)"
},
fillcolor: "rgba(106, 155, 188, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
976,
455,
0,
440,
],
type: "scatter",
yaxis: "y8",
xaxis: "x",
name: "Channel 8",
showlegend: true,
visible: true,
marker: {
color: "rgba(190, 235, 185, 0.5)"
},
line: {
width: 2,
color: "rgba(190, 235, 185, 0.5)"
},
fillcolor: "rgba(190, 235, 185, 0.25)",
mode: "lines",
hoverinfo: "none"
}
];
var layout = {
xaxis: {
domain: [0.05, 0.95],
zeroline: false,
tickfont: {
color: "rgba(255, 255, 255, 1)"
},
tickcolor: "rgba(255, 255, 255, 1)",
linecolor: "rgba(255, 255, 255, 1)",
gridcolor: "rgba(255, 255, 255, 0.12)",
visible: true,
anchor: "y2",
title: {
text: "X axis label",
font: {
color: "rgba(255, 255, 255, 1)"
}
},
type: "linear"
},
paper_bgcolor: "rgba(46, 46, 46, 1)",
plot_bgcolor: "rgba(46, 46, 46, 1)",
legend: {
font: {
color: "rgba(255, 255, 255, 1)"
}
},
barmode: "overlay",
yaxis: {
title: {
text: "Channel 1 [unit 1]",
font: {
color: "rgba(76, 198, 233, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(76, 198, 233, 1)"
},
tickcolor: "rgba(76, 198, 233, 1)",
linecolor: "rgba(76, 198, 233, 1)",
side: "left",
anchor: "x",
showspikes: false,
fixedrange: false,
domain: [0.55, 1],
type: "linear"
},
yaxis3: {
title: {
text: "Channel 2 [unit 2]",
font: {
color: "rgba(239, 151, 191, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(239, 151, 191, 1)"
},
tickcolor: "rgba(239, 151, 191, 1)",
linecolor: "rgba(239, 151, 191, 1)",
side: "right",
anchor: "x",
showspikes: false,
fixedrange: false,
overlaying: "y",
domain: [0.55, 1],
type: "linear",
},
yaxis5: {
title: {
text: "Channel 3",
font: {
color: "rgba(245, 150, 50, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(245, 150, 50, 1)"
},
tickcolor: "rgba(245, 150, 50, 1)",
linecolor: "rgba(245, 150, 50, 1)",
side: "left",
anchor: "free",
showspikes: false,
fixedrange: false,
overlaying: "y",
position: 0,
domain: [0.55, 1],
type: "linear",
},
yaxis7: {
title: {
text: "Channel 4 [unit 4]",
font: {
color: "rgba(218, 227, 109, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(218, 227, 109, 1)"
},
tickcolor: "rgba(218, 227, 109, 1)",
linecolor: "rgba(218, 227, 109, 1)",
side: "right",
anchor: "free",
showspikes: false,
fixedrange: false,
overlaying: "y",
position: 1,
domain: [0.55, 1],
type: "linear",
},
yaxis2: {
title: {
text: "Channel 5 [unit 5]",
font: {
color: "rgba(178, 74, 195, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(178, 74, 195, 1)"
},
tickcolor: "rgba(178, 74, 195, 1)",
linecolor: "rgba(178, 74, 195, 1)",
side: "left",
anchor: "x",
showspikes: false,
fixedrange: false,
domain: [0.05, 0.5],
type: "linear",
},
yaxis4: {
title: {
text: "Channel 6",
font: {
color: "rgba(74, 211, 203, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(74, 211, 203, 1)"
},
tickcolor: "rgba(74, 211, 203, 1)",
linecolor: "rgba(74, 211, 203, 1)",
side: "right",
anchor: "x",
showspikes: false,
fixedrange: false,
overlaying: "y2",
domain: [0.05, 0.5],
type: "linear",
},
yaxis6: {
title: {
text: "Channel 7 [unit 7]",
font: {
color: "rgba(106, 155, 188, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(106, 155, 188, 1)"
},
tickcolor: "rgba(106, 155, 188, 1)",
linecolor: "rgba(106, 155, 188, 1)",
side: "left",
anchor: "free",
showspikes: false,
fixedrange: false,
overlaying: "y2",
position: 0,
domain: [0.05, 0.5],
type: "linear",
},
yaxis8: {
title: {
text: "Channel 8 [unit 8]",
font: {
color: "rgba(190, 235, 185, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(190, 235, 185, 1)"
},
tickcolor: "rgba(190, 235, 185, 1)",
linecolor: "rgba(190, 235, 185, 1)",
side: "right",
anchor: "free",
showspikes: false,
fixedrange: false,
overlaying: "y2",
position: 1,
domain: [0.05, 0.5],
type: "linear"
},
grid: {
columns: 1,
rows: 2
},
xaxis2: {
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(178, 74, 195, 1)"
},
gridcolor: "rgba(255, 255, 255, 0.12)",
tickcolor: "rgba(178, 74, 195, 1)",
linecolor: "rgba(178, 74, 195, 1)",
anchor: "free",
position: 0,
scaleanchor: "x",
type: "linear",
domain: [0.05, 0.95],
overlaying: 'x'
},
showlegend: false
};
Plotly.newPlot("myDiv", data, layout, {
responsive: true
});
I am unable to figure out why track with name "Channel 5" is hiding other tracks behind it, while xaxis2.overlaying is set to 'x' and yaxis6.overlaying = yaxis4.overlaying = yaxis8.overlaying = 'y2'.
here is screen shot.
and code pen https://codepen.io/goyaltushar92/pen/ZYzbjZr