Overlaying x axis doesn't work correctly.

[goyaltushar92]

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

[goyaltushar92]

I just noted, it works if i update yaxis6.overlaying = yaxis2.overlaying = yaxis8.overlaying = 'y4' and remove yaxis4.overlaying.
but i still think old config should have worked too.