Merge pull request #2857 from plotly/yaxis-over-yaxis2

Fix 'yaxis-over-yaxis2' behavior

Author: etpinard

src/plots/cartesian/index.js

@@ -392,9 +392,12 @@ function makeSubplotData(gd) {
     var fullLayout = gd._fullLayout;
     var ids = fullLayout._subplots.cartesian;
     var len = ids.length;
-    var subplotData = new Array(len);
     var i, j, id, plotinfo, xa, ya;
 
+    // split 'regular' and 'overlaying' subplots
+    var regulars = [];
+    var overlays = [];
+
     for(i = 0; i < len; i++) {
         id = ids[i];
         plotinfo = fullLayout._plots[id];
@@ -408,25 +411,35 @@ function makeSubplotData(gd) {
         plotinfo.overlays = [];
 
         if(mainplot !== id && mainplotinfo) {
-            // link 'main plot' ref in overlaying plotinfo
             plotinfo.mainplot = mainplot;
             plotinfo.mainplotinfo = mainplotinfo;
-            // fill in list of overlaying subplots in 'main plot'
-            mainplotinfo.overlays.push(plotinfo);
+            overlays.push(id);
         } else {
             plotinfo.mainplot = undefined;
             plotinfo.mainPlotinfo = undefined;
+            regulars.push(id);
         }
     }
 
-    // use info about axis layer and overlaying pattern
-    // to clean what need to be cleaned up in exit selection
+    // fill in list of overlaying subplots in 'main plot'
+    for(i = 0; i < overlays.length; i++) {
+        id = overlays[i];
+        plotinfo = fullLayout._plots[id];
+        plotinfo.mainplotinfo.overlays.push(plotinfo);
+    }
+
+    // put 'regular' subplot data before 'overlaying'
+    var subplotIds = regulars.concat(overlays);
+    var subplotData = new Array(len);
+
     for(i = 0; i < len; i++) {
-        id = ids[i];
+        id = subplotIds[i];
         plotinfo = fullLayout._plots[id];
         xa = plotinfo.xaxis;
         ya = plotinfo.yaxis;
 
+        // use info about axis layer and overlaying pattern
+        // to clean what need to be cleaned up in exit selection
         var d = [id, xa.layer, ya.layer, xa.overlaying || '', ya.overlaying || ''];
         for(j = 0; j < plotinfo.overlays.length; j++) {
             d.push(plotinfo.overlays[j].id);

test/image/baselines/yaxis-over-yaxis2.png

@@ -0,0 +1,80 @@
+{
+  "data": [
+    {
+      "x": [
+        "2018-05-09 11:33:32.330",
+        "2018-05-09 11:33:32.367",
+        "2018-05-09 11:33:32.367",
+        "2018-05-09 11:33:32.374",
+        "2018-05-09 11:33:32.379"
+      ],
+      "y": [
+        1.2,
+        1.3,
+        1.1,
+        1.4,
+        0.9
+      ],
+      "mode": "lines",
+      "name": "Reference Bid",
+      "line": {
+        "shape": "hv",
+        "dash": "solid"
+      },
+      "fill": "none"
+    },
+    {
+      "x": [
+        "2018-05-09 11:33:32.330",
+        "2018-05-09 11:33:32.367",
+        "2018-05-09 11:33:32.367",
+        "2018-05-09 11:33:32.374",
+        "2018-05-09 11:33:32.379"
+      ],
+      "y": [
+        0,
+        0.2,
+        0.4,
+        0.6,
+        1
+      ],
+      "mode": "lines",
+      "name": "y2",
+      "yaxis": "y2",
+      "line": {
+        "shape": "vh",
+        "dash": "solid"
+      },
+      "fill": "tozeroy",
+      "marker": {
+        "color": "rgba(168, 216, 234, 0.5)"
+      }
+    }
+  ],
+  "layout": {
+    "margin": {
+      "b": 100,
+      "l": 120,
+      "t": 25,
+      "r": 10,
+      "pad": 10
+    },
+    "xaxis": {
+      "title": "x1"
+    },
+    "yaxis": {
+      "title": "y1",
+      "overlaying": "y2"
+    },
+    "yaxis2": {
+      "side": "right",
+      "title": "y2"
+    },
+    "legend": {
+      "x": 1.1,
+      "y": 1
+    },
+    "hovermode": "closest",
+    "dragmode": "zoom"
+  }
+}