ticklabelalignment

src/plots/cartesian/axes.js

@@ -1736,14 +1736,22 @@ axes.doTicksSingle = function(gd, arg, skipTitle) {
                 return d.dy + d.fontSize * MID_SHIFT - labelShift * flipit;
             };
             labelx = function(d) {
+                var alignmentFlip = (ax.ticklabelalignment === "outside") ? 1 : -1
                 return d.dx + position + (labelStandoff + pad +
-                    ((Math.abs(ax.tickangle) === 90) ? d.fontSize / 2 : 0)) * flipit;
+                    ((Math.abs(ax.tickangle) === 90) ? d.fontSize / 2 : 0)) * flipit 
+                    * alignmentFlip;
             };
             labelanchor = function(angle) {
                 if(isNumeric(angle) && Math.abs(angle) === 90) {
                     return 'middle';
                 }
-                return axside === 'right' ? 'start' : 'end';
+                let alignment = axside === 'right' ? 'start' : 'end';
+
+                // flip the alignment rules if ticklabels are inside the axis
+                if (ax.ticklabelalignment === "inside") {
+                    alignment = axside === 'right' ? 'end' : 'start';
+                }
+                return alignment;
             };
         }
         else if(axid === 'angular') {

src/plots/cartesian/layout_attributes.js

@@ -344,6 +344,13 @@ module.exports = {
         editType: 'ticks',
         description: 'Determines whether or not the tick labels are drawn.'
     },
+    ticklabelalignment: {
+        valType: 'string',
+        dflt: 'outside',
+        role: 'style',
+        editType: 'ticks',
+        description: 'Determines whether the tick labels will be inside the axis (and text aligned toward the axis.'
+    },
     automargin: {
         valType: 'boolean',
         dflt: false,

src/plots/cartesian/tick_label_defaults.js

@@ -33,7 +33,13 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe
             size: font.size,
             color: dfltFontColor
         });
-        coerce('tickangle');
+        var tickangle = coerce('tickangle');
+
+        var tickLabelAlignment = coerce('ticklabelalignment');
+        // if tickangle is not 90, set ticklabelalignment back to default "outside"
+        if (tickangle !== 90 && tickangle !== 'auto') {
+            containerOut['ticklabelalignment'] = 'outside';
+        }
 
         if(axType !== 'category') {
             var tickFormat = coerce('tickformat');

test/image/mocks/multiple_subplots.json

@@ -70,7 +70,8 @@
       "domain": [
         0,
         0.45
-      ]
+      ],
+      "ticklabelalignment": "inside"
     },
     "xaxis4": {
       "domain": [
@@ -97,20 +98,23 @@
         0,
         0.45
       ],
-      "anchor": "x2"
+      "anchor": "x2",
+      "ticklabelalignment": "inside"
     },
     "yaxis3": {
       "domain": [
         0.55,
         1
-      ]
+      ],
+      "ticklabelalignment": "inside"
     },
     "yaxis4": {
       "domain": [
         0.55,
         1
       ],
-      "anchor": "x4"
+      "anchor": "x4",
+      "ticklabelalignment": "inside"
     }
   }
 }

test/image/mocks/overlaying-axis-lines.json

@@ -9,8 +9,8 @@
   }],
   "layout": {
     "xaxis": {"showline": true},
-    "yaxis": {"showline": true},
+    "yaxis": {"showline": true, "ticklabelalignment": "inside"},
     "xaxis2": {"showline": true, "overlaying": "x", "side": "top"},
-    "yaxis2": {"showline": true, "overlaying": "y", "side": "right"}
+    "yaxis2": {"showline": true, "overlaying": "y", "side": "right", "ticklabelalignment": "inside"}
   }
 }

test/image/mocks/tick_attributes.json

@@ -34,7 +34,8 @@
                 -2.1464968152866244,
                 0.1464968152866242
             ],
-            "autorange": true
+            "autorange": true,
+            "ticklabelalignment": "inside"
         },
         "height": 450,
         "width": 1000,

test/image/mocks/tick_prefix_suffix.json

@@ -18,7 +18,8 @@
             "tickprefix": "*** ",
             "showtickprefix": "first",
             "ticksuffix": " €",
-            "showticksuffix": "last"
+            "showticksuffix": "last",
+            "ticklabelalignment": "inside"
         }
     }
 }

test/image/mocks/tickformat.json

@@ -16,7 +16,8 @@
         },
         "yaxis": {
             "type": "log",
-            "tickformat": ":^+12.3g"
+            "tickformat": ":^+12.3g",
+            "ticklabelalignment": "inside"
         }
     }
 }