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

src/components/colorbar/attributes.js

@@ -129,7 +129,19 @@ module.exports = overrideAll({
         description: 'Sets the color of padded area.'
     },
     // tick and title properties named and function exactly as in axes
-    tickmode: axesAttrs.tickmode,
+    tickmode: extendFlat({}, axesAttrs.tickmode, {
+        values: ['auto', 'linear', 'array'],
+        description: [
+            'Sets the tick mode for this axis.',
+            'If *auto*, the number of ticks is set via `nticks`.',
+            'If *linear*, the placement of the ticks is determined by',
+            'a starting position `tick0` and a tick step `dtick`',
+            '(*linear* is the default value if `tick0` and `dtick` are provided).',
+            'If *array*, the placement of the ticks is set via `tickvals`',
+            'and the tick text is `ticktext`.',
+            '(*array* is the default value if `tickvals` is provided).'
+        ].join(' ')
+    }),
     nticks: axesAttrs.nticks,
     tick0: axesAttrs.tick0,
     dtick: axesAttrs.dtick,

src/plots/cartesian/axes.js

@@ -951,6 +951,13 @@ axes.calcTicks = function calcTicks(ax, opts) {
             continue;
         }
 
+        // fill tickVals based on overlaying axis
+        if(mockAx.tickmode === 'sync') {
+            tickVals = [];
+            ticksOut = syncTicks(ax);
+            continue;
+        }
+
         // add a tiny bit so we get ticks which may have rounded out
         var exRng = expandRange(rng);
         var startTick = exRng[0];
@@ -1203,6 +1210,51 @@ axes.calcTicks = function calcTicks(ax, opts) {
     return ticksOut;
 };
 
+function filterRangeBreaks(ax, ticksOut) {
+    if(ax.rangebreaks) {
+        // remove ticks falling inside rangebreaks
+        ticksOut = ticksOut.filter(function(d) {
+            return ax.maskBreaks(d.x) !== BADNUM;
+        });
+    }
+
+    return ticksOut;
+}
+
+function syncTicks(ax) {
+    // get the overlaying axis
+    var baseAxis = ax._mainAxis;
+
+    var ticksOut = [];
+    if(baseAxis._vals) {
+        for(var i = 0; i < baseAxis._vals.length; i++) {
+            // get the position of the every tick
+            var pos = baseAxis.l2p(baseAxis._vals[i].x);
+
+            // get the tick for the current axis based on position
+            var vali = ax.p2l(pos);
+            var val1 = ax.p2l(pos - 0.1);
+            var val2 = ax.p2l(pos + 0.1);
+            var d = 1 + Math.round(Math.log10(Math.abs(val2 - val1)));
+            var e = Math.pow(10, -d);
+            var valR = Math.round(vali * e) / e;
+            var obj = axes.tickText(ax, valR);
+
+            // assign minor ticks
+            if(baseAxis._vals[i].minor) {
+                obj.minor = true;
+                obj.text = '';
+            }
+
+            ticksOut.push(obj);
+        }
+    }
+
+    ticksOut = filterRangeBreaks(ax, ticksOut);
+
+    return ticksOut;
+}
+
 function arrayTicks(ax) {
     var rng = Lib.simpleMap(ax.range, ax.r2l);
     var exRng = expandRange(rng);
@@ -1249,12 +1301,7 @@ function arrayTicks(ax) {
         }
     }
 
-    if(ax.rangebreaks) {
-        // remove ticks falling inside rangebreaks
-        ticksOut = ticksOut.filter(function(d) {
-            return ax.maskBreaks(d.x) !== BADNUM;
-        });
-    }
+    ticksOut = filterRangeBreaks(ax, ticksOut);
 
     return ticksOut;
 }
@@ -2256,6 +2303,18 @@ axes.draw = function(gd, arg, opts) {
         return ax.overlaying;
     });
 
+    // order axes that have dependency to other axes
+    axList.map(function(axId) {
+        var ax = axes.getFromId(gd, axId);
+
+        if(ax.tickmode === 'sync' && ax.overlaying) {
+            var overlayingIndex = axList.findIndex(function(axis) {return axis === ax.overlaying;});
+
+            if(overlayingIndex >= 0) {
+                axList.unshift(axList.splice(overlayingIndex, 1).shift());
+            }
+        }
+    });
 
     var axShifts = {'false': {'left': 0, 'right': 0}};
 
@@ -3247,6 +3306,11 @@ axes.drawTicks = function(gd, ax, opts) {
 axes.drawGrid = function(gd, ax, opts) {
     opts = opts || {};
 
+    if(ax.tickmode === 'sync') {
+        // for tickmode sync we use the overlaying axis grid
+        return;
+    }
+
     var cls = ax._id + 'grid';
 
     var hasMinor = ax.minor && ax.minor.showgrid;

src/plots/cartesian/dragbox.js

@@ -727,15 +727,23 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             }
         }
 
+        function pushActiveAxIdsSynced(axList, axisType) {
+            for(i = 0; i < axList.length; i++) {
+                if(!axList[i].fixedrange && axList[i][axisType]) {activeAxIds.push(axList[i][axisType]._id);}
+            }
+        }
+
         if(editX) {
             pushActiveAxIds(xaxes);
             pushActiveAxIds(links.xaxes);
             pushActiveAxIds(matches.xaxes);
+            pushActiveAxIdsSynced(plotinfo.overlays, 'xaxis');
         }
         if(editY) {
             pushActiveAxIds(yaxes);
             pushActiveAxIds(links.yaxes);
             pushActiveAxIds(matches.yaxes);
+            pushActiveAxIdsSynced(plotinfo.overlays, 'yaxis');
         }
 
         updates = {};

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: [
@@ -25,7 +25,9 @@ var tickmode = {
         '(*linear* is the default value if `tick0` and `dtick` are provided).',
         'If *array*, the placement of the ticks is set via `tickvals`',
         'and the tick text is `ticktext`.',
-        '(*array* is the default value if `tickvals` is provided).'
+        '(*array* is the default value if `tickvals` is provided).',
+        'If *sync*, the number of ticks will sync with the overlayed axis',
+        'set by `overlaying` property.'
     ].join(' ')
 };
 

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

src/plots/gl3d/layout/axis_attributes.js

@@ -74,7 +74,19 @@ module.exports = overrideAll({
         anim: false
     }),
     // ticks
-    tickmode: axesAttrs.tickmode,
+    tickmode: extendFlat({}, axesAttrs.tickmode, {
+        values: ['auto', 'linear', 'array'],
+        description: [
+            'Sets the tick mode for this axis.',
+            'If *auto*, the number of ticks is set via `nticks`.',
+            'If *linear*, the placement of the ticks is determined by',
+            'a starting position `tick0` and a tick step `dtick`',
+            '(*linear* is the default value if `tick0` and `dtick` are provided).',
+            'If *array*, the placement of the ticks is set via `tickvals`',
+            'and the tick text is `ticktext`.',
+            '(*array* is the default value if `tickvals` is provided).'
+        ].join(' ')
+    }),
     nticks: axesAttrs.nticks,
     tick0: axesAttrs.tick0,
     dtick: axesAttrs.dtick,

src/plots/polar/layout_attributes.js

@@ -23,7 +23,19 @@ var axisLineGridAttr = overrideAll({
 }, 'plot', 'from-root');
 
 var axisTickAttrs = overrideAll({
-    tickmode: axesAttrs.tickmode,
+    tickmode: extendFlat({}, axesAttrs.tickmode, {
+        values: ['auto', 'linear', 'array'],
+        description: [
+            'Sets the tick mode for this axis.',
+            'If *auto*, the number of ticks is set via `nticks`.',
+            'If *linear*, the placement of the ticks is determined by',
+            'a starting position `tick0` and a tick step `dtick`',
+            '(*linear* is the default value if `tick0` and `dtick` are provided).',
+            'If *array*, the placement of the ticks is set via `tickvals`',
+            'and the tick text is `ticktext`.',
+            '(*array* is the default value if `tickvals` is provided).'
+        ].join(' ')
+    }),
     nticks: axesAttrs.nticks,
     tick0: axesAttrs.tick0,
     dtick: axesAttrs.dtick,

src/plots/ternary/layout_attributes.js

@@ -15,7 +15,19 @@ var ternaryAxesAttrs = {
     },
     color: axesAttrs.color,
     // ticks
-    tickmode: axesAttrs.tickmode,
+    tickmode: extendFlat({}, axesAttrs.tickmode, {
+        values: ['auto', 'linear', 'array'],
+        description: [
+            'Sets the tick mode for this axis.',
+            'If *auto*, the number of ticks is set via `nticks`.',
+            'If *linear*, the placement of the ticks is determined by',
+            'a starting position `tick0` and a tick step `dtick`',
+            '(*linear* is the default value if `tick0` and `dtick` are provided).',
+            'If *array*, the placement of the ticks is set via `tickvals`',
+            'and the tick text is `ticktext`.',
+            '(*array* is the default value if `tickvals` is provided).'
+        ].join(' ')
+    }),
     nticks: extendFlat({}, axesAttrs.nticks, {dflt: 6, min: 1}),
     tick0: axesAttrs.tick0,
     dtick: axesAttrs.dtick,

src/traces/indicator/attributes.js

@@ -307,7 +307,19 @@ module.exports = {
                 dflt: true
             }),
             // tick and title properties named and function exactly as in axes
-            tickmode: axesAttrs.tickmode,
+            tickmode: extendFlat({}, axesAttrs.tickmode, {
+                values: ['auto', 'linear', 'array'],
+                description: [
+                    'Sets the tick mode for this axis.',
+                    'If *auto*, the number of ticks is set via `nticks`.',
+                    'If *linear*, the placement of the ticks is determined by',
+                    'a starting position `tick0` and a tick step `dtick`',
+                    '(*linear* is the default value if `tick0` and `dtick` are provided).',
+                    'If *array*, the placement of the ticks is set via `tickvals`',
+                    'and the tick text is `ticktext`.',
+                    '(*array* is the default value if `tickvals` is provided).'
+                ].join(' ')
+            }),
             nticks: axesAttrs.nticks,
             tick0: axesAttrs.tick0,
             dtick: axesAttrs.dtick,

test/image/mocks/z-new_tickmode_sync.json

@@ -0,0 +1,91 @@
+{
+   "data": [
+      {
+         "name": "Apples",
+         "type": "bar",
+         "x": [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May"
+         ],
+         "y": [
+            232,
+            2506,
+            470,
+            1864,
+            -190
+         ]
+      },
+      {
+         "name": "Oranges",
+         "type": "scatter",
+         "x": [
+            "A",
+            "B",
+            "C"
+        ],
+        "y": [
+            0,
+            0.5,
+            1
+        ],
+         "yaxis": "y2",
+         "xaxis": "x2"
+      }
+   ],
+   "layout": {
+      "margin": {
+         "t": 40,
+         "r": 70,
+         "b": 40,
+         "l": 70
+      },
+      "width": 700,
+      "showlegend": false,
+      "xaxis2": {
+         "anchor": "y2",
+         "side": "top",
+         "overlaying": "x",
+         "tickmode": "sync",
+         "domain": [
+            0.52,
+            1
+         ]
+      },
+      "yaxis": {
+         "title": {
+            "text": "Apples"
+         },
+         "side": "left",
+         "range": [
+            0,
+            2506
+         ],
+         "ticklen": 10,
+         "tickwidth": 3,
+         "minor": {
+            "showgrid": true
+         }
+      },
+      "yaxis2": {
+         "title": {
+            "text": "Oranges"
+         },
+         "side": "right",
+         "range": [
+            0,
+            0.5
+         ],
+         "ticklen": 10,
+         "tickwidth": 3,
+         "overlaying": "y",
+         "tickmode": "sync",
+         "minor": {
+            "showgrid": true
+         },
+         "zeroline": false
+      }
+   }
+}