Merge pull request #7006 from my-tien/shift_axis_label

Add `ticklabelstandoff` and `ticklabelshift` to cartesian axes

Author: archmoj

draftlogs/7006_add.md

@@ -0,0 +1 @@
+ - Add property `ticklabelstandoff` and `ticklabelshift` to cartesian axes to adjust positioning of tick labels [[#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,39 @@ 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];
 
+    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 side = ax.side;
+        var standoffSign = (
+            (labelsInside && (side === 'top' || side === 'left')) ||
+            (labelsOutside && (side === 'bottom' || side === 'right'))
+        ) ? 1 : -1;
+        standoff = standoff * standoffSign;
+    }
     return ax._id.charAt(0) === 'x' ?
         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,29 @@ 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: [
+            'Sets the standoff distance (in px) between the axis tick labels and their default position.',
+            'A positive `ticklabelstandoff` moves the labels farther away from the plot area',
+            'if `ticklabelposition` is *outside*, and deeper into the plot area if',
+            '`ticklabelposition` is *inside*. A negative `ticklabelstandoff` works in the opposite',
+            'direction, moving outside ticks towards the plot area and inside ticks towards',
+            'the outside. If the negative value is large enough, inside ticks can even end up',
+            'outside and vice versa.'
+        ].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',