Add sync option to tickmode of cartesian axes to sync ticks with overlaying axis

src/plots/cartesian/axes.js

@@ -657,8 +657,35 @@ function isClose(a, b) {
 axes.prepTicks = function(ax, opts) {
     var rng = Lib.simpleMap(ax.range, ax.r2l, undefined, undefined, opts);
 
-    // calculate max number of (auto) ticks to display based on plot size
-    if(ax.tickmode === 'auto' || !ax.dtick) {
+    // sync ticks with the overlaying defined axis
+    if(ax.tickmode === 'sync') {
+        var baseAxis = ax._mainAxis;
+
+        // get range min and max to find range delta of axis 1
+        var minValBaseAxis = Math.min(baseAxis.range[0], baseAxis.range[1]);
+        var maxValBaseAxis = Math.max(baseAxis.range[0], baseAxis.range[1]);
+        var rangeDeltaBaseAxis = maxValBaseAxis - minValBaseAxis;
+
+        // get range min and max to find range delta of axis 2
+        var minValAxis = Math.min(ax.range[0], ax.range[1]);
+        var maxValAxis = Math.max(ax.range[0], ax.range[1]);
+        var rangeDeltaCurrentAxis = maxValAxis - minValAxis;
+
+        // set second axis' dtick value to be based off of same ratio as the first axis
+        var dtickRatio = rangeDeltaBaseAxis / baseAxis.dtick;
+        ax.dtick = rangeDeltaCurrentAxis / dtickRatio;
+
+        // validate that the axis has values before we try to use them for tick0 calculation
+        if(baseAxis && baseAxis._vals.length > 0) {
+            // get position of first axis' starting tick
+            var firstTickPosition = baseAxis.l2p(baseAxis._vals[0].x);
+            var firstTickPercentage = firstTickPosition / baseAxis._length;
+
+            // set current axis to have same starting tick position
+            var currentAxisOffsetVal = rangeDeltaCurrentAxis * (1 - firstTickPercentage);
+            ax.tick0 = currentAxisOffsetVal + minValAxis;
+        }
+    } else if(ax.tickmode === 'auto' || !ax.dtick) { // calculate max number of (auto) ticks to display based on plot size
         var nt = ax.nticks;
         var minPx;
 

src/plots/cartesian/layout_attributes.js

@@ -14,7 +14,7 @@ var DAY_OF_WEEK = constants.WEEKDAY_PATTERN;
 
 var tickmode = {
     valType: 'enumerated',
-    values: ['auto', 'linear', 'array'],
+    values: ['auto', 'linear', 'array', 'sync'],
     editType: 'ticks',
     impliedEdits: {tick0: undefined, dtick: undefined},
     description: [

src/plots/cartesian/tick_value_defaults.js

@@ -28,6 +28,8 @@ module.exports = function handleTickValueDefaults(containerIn, containerOut, coe
 
     if(tickmode === 'auto') {
         coerce(prefix + 'nticks');
+    } else if(tickmode === 'sync') {
+        coerce('overlaying');
     } else if(tickmode === 'linear') {
         // dtick is usually a positive number, but there are some
         // special strings available for log or date axes

test/image/mocks/z-new_tickmode_sync.json

@@ -0,0 +1,78 @@
+{
+   "data": [
+      {
+         "name": "Apples",
+         "type": "bar",
+         "x": [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May"
+         ],
+         "y": [
+            232,
+            2506,
+            470,
+            1864,
+            -190
+         ]
+      },
+      {
+         "name": "Oranges",
+         "type": "scatter",
+         "x": [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May"
+         ],
+         "y": [
+            -0.8,
+            0.09,
+            0.01,
+            0.13,
+            0.42
+         ],
+         "yaxis": "y2"
+      }
+   ],
+   "layout": {
+      "margin": {
+         "t": 40,
+         "r": 70,
+         "b": 40,
+         "l": 70
+      },
+      "width": 700,
+      "legend": {
+         "orientation": "h",
+         "x": 0.6,
+         "y": 1.1
+      },
+      "yaxis": {
+         "title": {
+            "text": "Apples"
+         },
+         "side": "left",
+         "range": [
+            0,
+            2506
+         ]
+      },
+      "yaxis2": {
+         "title": {
+            "text": "Oranges"
+         },
+         "side": "right",
+         "range": [
+            0,
+            0.42
+         ],
+         "overlaying": "y",
+         "tickmode": "sync",
+         "zeroline": false
+      }
+   }
+}