Add ticklabelstandoff and ticklabelshift to cartesian axes

draftlogs/7006_add.md

@@ -0,0 +1 @@
+ - Add property axis.ticklabelrunoff axis.ticklabelstandoff for shifting the tick labels by a number of pixels [[#7006](https://github.com/plotly/plotly.js/pull/7006)]

src/components/colorbar/defaults.js

@@ -111,6 +111,8 @@ module.exports = function colorbarDefaults(containerIn, containerOut, layout) {
     var font = layout.font;
     var opts = {
         noAutotickangles: true,
+        noTicklabelshift: true,
+        noTicklabelstandoff: true,
         outerTicks: false,
         font: font
     };

src/plots/cartesian/axes.js

@@ -2968,20 +2968,41 @@ axes.makeTransTickFn = function(ax) {
 
 axes.makeTransTickLabelFn = function(ax) {
     var uv = getTickLabelUV(ax);
+    var shift = ax.ticklabelshift || 0;
+    var standoff = ax.ticklabelstandoff || 0;
+
     var u = uv[0];
     var v = uv[1];
 
-    return ax._id.charAt(0) === 'x' ?
+    var isXaxis = ax._id.charAt(0) === 'x';
+    var isYaxis = !isXaxis;
+    var isReversed = ax.range[0] > ax.range[1];
+    var labelsInside = ax.ticklabelposition && ax.ticklabelposition.indexOf('inside') !== -1;
+    var labelsOutside = !labelsInside;
+
+    if(shift) {
+        var shiftSign = isReversed ? -1 : 1;
+        shift = shift * shiftSign;
+    }
+    if(standoff) {
+        var standoffSign =
+            isXaxis && ax.side === 'bottom' && labelsOutside ||
+            isXaxis && ax.side === 'top' && labelsInside ||
+            isYaxis && ax.side === 'right' && labelsOutside ||
+            isYaxis && ax.side === 'left' && labelsInside ? 1 : -1;
+        standoff = standoff * standoffSign;
+    }
+    return isXaxis ?
         function(d) {
             return strTranslate(
-                u + ax._offset + ax.l2p(getPosX(d)),
-                v
+                u + ax._offset + ax.l2p(getPosX(d)) + shift,
+                v + standoff
             );
         } :
         function(d) {
             return strTranslate(
-                v,
-                u + ax._offset + ax.l2p(getPosX(d))
+                v + standoff,
+                u + ax._offset + ax.l2p(getPosX(d)) + shift
             );
         };
 };

src/plots/cartesian/layout_attributes.js

@@ -698,6 +698,26 @@ module.exports = {
             'In other cases the default is *hide past div*.'
         ].join(' ')
     },
+    ticklabelshift: {
+        valType: 'integer',
+        dflt: 0,
+        editType: 'ticks',
+        description: [
+            'Shifts the tick labels by the specified number of pixels in parallel to the axis.',
+            'Positive values move the labels in the positive direction of the axis.'
+        ].join(' ')
+    },
+    ticklabelstandoff: {
+        valType: 'integer',
+        dflt: 0,
+        editType: 'ticks',
+        description: [
+            'Shifts the tick labels by the specified number of pixels orthogonally to the axis.',
+            'A positive `ticklabelstandoff` will move the labels farther away from the plot area',
+            'if `ticklabelposition` is "outside", and deeper into the plotarea if',
+            '`ticklabelposition` is "inside".'
+        ].join(' ')
+    },
     mirror: {
         valType: 'enumerated',
         values: [true, 'ticks', false, 'all', 'allticks'],

src/plots/cartesian/tick_label_defaults.js

@@ -16,6 +16,12 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe
 
     var showTickLabels = coerce('showticklabels');
     if(showTickLabels) {
+        if(!options.noTicklabelshift) {
+            coerce('ticklabelshift');
+        }
+        if(!options.noTicklabelstandoff) {
+            coerce('ticklabelstandoff');
+        }
         var font = options.font || {};
         var contColor = containerOut.color;
         var position = containerOut.ticklabelposition || '';

src/plots/gl3d/layout/axis_defaults.js

@@ -44,6 +44,8 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
                 noAutotickangles: true,
                 noTickson: true,
                 noTicklabelmode: true,
+                noTicklabelshift: true,
+                noTicklabelstandoff: true,
                 noTicklabelstep: true,
                 noTicklabelposition: true,
                 noTicklabeloverflow: true,

src/plots/polar/layout_defaults.js

@@ -186,7 +186,9 @@ function handleDefaults(contIn, contOut, coerce, opts) {
                     size: dfltFontSize,
                     family: dfltFontFamily
                 },
-                noAutotickangles: axName === 'angularaxis'
+                noAutotickangles: axName === 'angularaxis',
+                noTicklabelshift: true,
+                noTicklabelstandoff: true
             });
 
             handleTickMarkDefaults(axIn, axOut, coerceAxis, {outerTicks: true});

src/plots/smith/layout_defaults.js

@@ -90,6 +90,8 @@ function handleDefaults(contIn, contOut, coerce, opts) {
 
             handleTickLabelDefaults(axIn, axOut, coerceAxis, axOut.type, {
                 noAutotickangles: true,
+                noTicklabelshift: true,
+                noTicklabelstandoff: true,
                 noTicklabelstep: true,
                 noAng: !isRealAxis,
                 noExp: true,

src/plots/ternary/layout_defaults.js

@@ -91,7 +91,11 @@ function handleAxisDefaults(containerIn, containerOut, options, ternaryLayoutOut
 
     handleTickValueDefaults(containerIn, containerOut, coerce, 'linear');
     handlePrefixSuffixDefaults(containerIn, containerOut, coerce, 'linear');
-    handleTickLabelDefaults(containerIn, containerOut, coerce, 'linear', { noAutotickangles: true });
+    handleTickLabelDefaults(containerIn, containerOut, coerce, 'linear', {
+        noAutotickangles: true,
+        noTicklabelshift: true,
+        noTicklabelstandoff: true
+    });
     handleTickMarkDefaults(containerIn, containerOut, coerce,
         { outerTicks: true });
 

src/traces/carpet/ab_defaults.js

@@ -31,6 +31,8 @@ function mimickAxisDefaults(traceIn, traceOut, fullLayout, dfltColor) {
 
         var defaultOptions = {
             noAutotickangles: true,
+            noTicklabelshift: true,
+            noTicklabelstandoff: true,
             noTicklabelstep: true,
             tickfont: 'x',
             id: axLetter + 'axis',

src/traces/indicator/defaults.js

@@ -132,7 +132,9 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
         var opts = {
             font: layout.font,
             noAutotickangles: true,
-            outerTicks: true
+            outerTicks: true,
+            noTicklabelshift: true,
+            noTicklabelstandoff: true
         };
         handleTickValueDefaults(axisIn, axisOut, coerceGaugeAxis, 'linear');
         handlePrefixSuffixDefaults(axisIn, axisOut, coerceGaugeAxis, 'linear', opts);

test/image/mocks/zzz_ticklabelshift_ticklabelstandoff.json

@@ -0,0 +1,158 @@
+{
+    "data": [{
+        "xaxis": "x",
+        "yaxis": "y",
+        "x": ["20-12-20", "21-01-20"],
+        "y": [1e-1, 1e+6]
+    }, {
+        "xaxis": "x2",
+        "yaxis": "y2",
+        "x": ["20-10", "21-05-15"],
+        "y": [1e-1, 1e+6]
+    }, {
+        "xaxis": "x3",
+        "yaxis": "y3",
+        "x": ["20", "23"],
+        "y": [1e-1, 1e+6]
+    }, {
+        "xaxis": "x4",
+        "yaxis": "y4",
+        "x": ["20-12-20", "21-01-20"],
+        "y": [1e-1, 1e+6]
+    }],
+    "layout": {
+        "xaxis": {
+            "minor": { "showgrid": true },
+            "anchor": "y",
+            "domain": [0, 0.475],
+            "type": "date",
+            "ticklabelmode": "period",
+            "ticklabelstandoff": 20,
+            "ticklabelshift": 20,
+            "side": "bottom",
+            "ticks": "inside",
+            "tickfont": { "size": 16 },
+            "ticklen": 16,
+            "tickwidth": 8,
+            "linewidth": 1,
+            "gridcolor": "white"
+        },
+        "yaxis": {
+            "minor": { "showgrid": true },
+            "anchor": "x",
+            "domain": [0, 0.475],
+            "autorange": "reversed",
+            "type": "log",
+            "side": "left",
+            "ticks": "inside",
+            "ticklabelposition": "outside top",
+            "ticklabelstandoff": 20,
+            "tickfont": { "size": 20 },
+            "ticklen": 8,
+            "tickwidth": 4,
+            "linewidth": 4,
+            "gridcolor": "white"
+        },
+        "xaxis2": {
+            "minor": { "showgrid": true },
+            "anchor": "y2",
+            "domain": [0.525, 1],
+            "autorange": "reversed",
+            "type": "date",
+            "side": "bottom",
+            "ticks": "inside",
+            "ticklabelposition": "inside left",
+            "ticklabelstandoff": 20,
+            "tickfont": { "size": 20 },
+            "ticklen": 8,
+            "tickwidth": 4,
+            "linewidth": 4,
+            "gridcolor": "white"
+        },
+        "yaxis2": {
+            "minor": { "showgrid": true },
+            "anchor": "x2",
+            "domain": [0, 0.475],
+            "type": "log",
+            "side": "right",
+            "ticks": "inside",
+            "ticklabelposition": "inside",
+            "ticklabelstandoff": 20,
+            "ticklen": 16,
+            "tickwidth": 8,
+            "linewidth": 1,
+            "gridcolor": "white"
+        },
+        "xaxis3": {
+            "minor": { "showgrid": true },
+            "anchor": "y3",
+            "domain": [0.525, 1],
+            "type": "date",
+            "side": "top",
+            "ticks": "inside",
+            "ticklabelposition": "inside right",
+            "ticklabelstandoff": 20,
+            "ticklabelshift": 40,
+            "tickfont": { "size": 20 },
+            "ticklen": 16,
+            "tickwidth": 8,
+            "linewidth": 1,
+            "gridcolor": "white"
+        },
+        "yaxis3": {
+            "minor": { "showgrid": true },
+            "anchor": "x3",
+            "domain": [0.525, 1],
+            "autorange": "reversed",
+            "type": "log",
+            "side": "right",
+            "ticks": "inside",
+            "ticklabelposition": "inside bottom",
+            "ticklabelstandoff": 10,
+            "ticklabelshift": -10,
+            "tickfont": { "size": 16 },
+            "ticklen": 8,
+            "tickwidth": 4,
+            "linewidth": 4,
+            "gridcolor": "white"
+        },
+        "xaxis4": {
+            "minor": { "showgrid": true },
+            "anchor": "y4",
+            "domain": [0, 0.475],
+            "autorange": "reversed",
+            "type": "date",
+            "ticklabelmode": "period",
+            "side": "top",
+            "ticks": "outside",
+            "ticklabelposition": "outside",
+            "ticklabelstandoff": -10,
+            "ticklabelshift": 15,
+            "tickfont": { "size": 16 },
+            "ticklen": 8,
+            "tickwidth": 4,
+            "linewidth": 4,
+            "gridcolor": "white"
+        },
+        "yaxis4": {
+            "minor": { "showgrid": true },
+            "anchor": "x4",
+            "domain": [0.525, 1],
+            "type": "log",
+            "side": "left",
+            "ticks": "outside",
+            "ticklabelposition": "outside bottom",
+            "tickangle": 30,
+            "tickfont": { "size": 16 },
+            "ticklen": 16,
+            "tickwidth": 8,
+            "linewidth": 1,
+            "gridcolor": "white"
+        },
+        "font": {
+            "family": "Raleway"
+        },
+        "plot_bgcolor": "lightblue",
+        "showlegend": false
+    }
+}

test/plot-schema.json

@@ -15154,6 +15154,18 @@
       "inside bottom"
      ]
     },
+    "ticklabelshift": {
+     "description": "Shifts the tick labels by the specified number of pixels in parallel to the axis. Positive values move the labels in the positive direction of the axis.",
+     "dflt": 0,
+     "editType": "ticks",
+     "valType": "integer"
+    },
+    "ticklabelstandoff": {
+     "description": "Shifts the tick labels by the specified number of pixels orthogonally to the axis. A positive `ticklabelstandoff` will move the labels farther away from the plot area if `ticklabelposition` is \"outside\", and deeper into the plotarea if `ticklabelposition` is \"inside\".",
+     "dflt": 0,
+     "editType": "ticks",
+     "valType": "integer"
+    },
     "ticklabelstep": {
      "description": "Sets the spacing between tick labels as compared to the spacing between ticks. A value of 1 (default) means each tick gets a label. A value of 2 means shows every 2nd label. A larger value n means only every nth tick is labeled. `tick0` determines which labels are shown. Not implemented for axes with `type` *log* or *multicategory*, or when `tickmode` is *array*.",
      "dflt": 1,
@@ -16463,6 +16475,18 @@
       "inside bottom"
      ]
     },
+    "ticklabelshift": {
+     "description": "Shifts the tick labels by the specified number of pixels in parallel to the axis. Positive values move the labels in the positive direction of the axis.",
+     "dflt": 0,
+     "editType": "ticks",
+     "valType": "integer"
+    },
+    "ticklabelstandoff": {
+     "description": "Shifts the tick labels by the specified number of pixels orthogonally to the axis. A positive `ticklabelstandoff` will move the labels farther away from the plot area if `ticklabelposition` is \"outside\", and deeper into the plotarea if `ticklabelposition` is \"inside\".",
+     "dflt": 0,
+     "editType": "ticks",
+     "valType": "integer"
+    },
     "ticklabelstep": {
      "description": "Sets the spacing between tick labels as compared to the spacing between ticks. A value of 1 (default) means each tick gets a label. A value of 2 means shows every 2nd label. A larger value n means only every nth tick is labeled. `tick0` determines which labels are shown. Not implemented for axes with `type` *log* or *multicategory*, or when `tickmode` is *array*.",
      "dflt": 1,