Merge pull request #7006 from my-tien/shift_axis_label

Add `ticklabelstandoff` and `ticklabelshift` to cartesian axes

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',

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": "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.",
+     "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": "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.",
+     "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,