plotly · archmoj · Jun 27, 2019 · May 28, 2019 · May 29, 2019 · May 29, 2019
diff --git a/src/traces/parcoords/attributes.js b/src/traces/parcoords/attributes.js
@@ -19,6 +19,17 @@ var templatedArray = require('../../plot_api/plot_template').templatedArray;
 module.exports = {
     domain: domainAttrs({name: 'parcoords', trace: true, editType: 'calc'}),
 
+    labelangle: {
+        valType: 'angle',
+        dflt: 0,
+        role: 'style',
+        editType: 'plot',
+        description: [
+            'Sets the angle of the labels with respect to the horizontal.',
+            'For example, a `tickangle` of -90 draws the labels vertically.'
+        ].join(' ')
+    },
+
     labelfont: fontAttrs({
         editType: 'calc',
         description: 'Sets the font for the `dimension` labels.'

diff --git a/src/traces/parcoords/defaults.js b/src/traces/parcoords/defaults.js
@@ -100,4 +100,6 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     Lib.coerceFont(coerce, 'labelfont', fontDflt);
     Lib.coerceFont(coerce, 'tickfont', fontDflt);
     Lib.coerceFont(coerce, 'rangefont', fontDflt);
+
+    coerce('labelangle');
 };
diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js
@@ -153,6 +153,7 @@ function model(layout, d, i) {
     var domain = trace.domain;
     var dimensions = trace.dimensions;
     var width = layout.width;
+    var labelAngle = trace.labelangle;
     var labelFont = trace.labelfont;
     var tickFont = trace.tickfont;
     var rangeFont = trace.rangefont;
@@ -181,6 +182,7 @@ function model(layout, d, i) {
         tickDistance: c.tickDistance,
         unitToColor: unitToColorScale(cscale),
         lines: lines,
+        labelAngle: labelAngle,
         labelFont: labelFont,
         tickFont: tickFont,
         rangeFont: rangeFont,
@@ -348,6 +350,17 @@ function parcoordsInteractionState() {
     };
 }
 
+function calcTilt(angle) {
 // how much to shift a multi-line label to center it vertically. 
 var nLines = svgTextUtils.lineCount(thisLabel); 
 var lineHeight = LINE_SPACING * d.fontSize; 
 var anchorHeight = labelFns.heightFn(d, isNumeric(angle) ? +angle : 0, (nLines - 1) * lineHeight); 
 if(anchorHeight) { 
     transform += ' translate(0, ' + anchorHeight + ')'; 
 } 
 // how much to shift a multi-line label to center it vertically. 
 var nLines = svgTextUtils.lineCount(thisLabel); 
 var lineHeight = LINE_SPACING * d.fontSize; 
 var anchorHeight = labelFns.heightFn(d, isNumeric(angle) ? +angle : 0, (nLines - 1) * lineHeight); 
  
 if(anchorHeight) { 
     transform += ' translate(0, ' + anchorHeight + ')'; 
 } 
+    var radians = angle * Math.PI / 180;
+    var dx = Math.sin(radians);
+    var dy = Math.cos(radians);
+    return {
+        dx: dx,
+        dy: dy,
+        degrees: angle
+    };
+}
+
 module.exports = function(gd, svg, parcoordsLineLayers, cdModule, layout, callbacks) {
     var state = parcoordsInteractionState();
 
@@ -601,12 +614,29 @@ module.exports = function(gd, svg, parcoordsLineLayers, cdModule, layout, callba
         .style('pointer-events', 'auto');
 
     axisTitle
-        .attr('transform', 'translate(0,' + -c.axisTitleOffset + ')')
         .text(function(d) { return d.label; })
         .each(function(d) {
             var e = d3.select(this);
             Drawing.font(e, d.model.labelFont);
             svgTextUtils.convertToTspans(e, gd);
+        })
+        .attr('transform', function(d) {
+            var tilt = calcTilt(d.model.labelAngle);
+            var r = c.axisTitleOffset;
+            return (
+                'rotate(' + tilt.degrees + ')' +
+                'translate(' + -r * tilt.dx + ',' + -r * tilt.dy + ')'
+            );
+        })
+        .attr('text-anchor', function(d) {
+            var tilt = calcTilt(d.model.labelAngle);
+            var adx = Math.abs(tilt.dx);
+            var ady = Math.abs(tilt.dy);
+            if(2 * adx > ady) {
+                return (tilt.dx < 0) ? 'start' : 'end';
+            } else {
+                return 'middle';
+            }
         });
 
     var axisExtent = axisOverlays.selectAll('.' + c.cn.axisExtent)

diff --git a/test/image/baselines/gl2d_parcoords_60_dims.png b/test/image/baselines/gl2d_parcoords_60_dims.png
diff --git a/test/image/baselines/gl2d_parcoords_tick_format.png b/test/image/baselines/gl2d_parcoords_tick_format.png