Merge pull request #7673 from chrimaho/feature-marker-line-dash-7667

Add support for dashed marker lines in scatter plots

Author: camdecoster

draftlogs/7673_add.md

@@ -0,0 +1 @@
+ - Add support for dashed marker lines in scatter plots [[#7673](https://github.com/plotly/plotly.js/pull/7673)], with thanks to @chrimaho for the contribution!

src/components/drawing/index.js

@@ -965,6 +965,8 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) {
         }
     }
 
+    const lineDash = d.mld || (markerLine || {}).dash;
+    if (lineDash) drawing.dashLine(sel, lineDash, lineWidth);
     if (d.om) {
         // open markers can't have zero linewidth, default to 1px,
         // and use fill color as stroke color

src/components/legend/style.js

@@ -38,6 +38,7 @@ module.exports = function arraysToCalcdata(cd, trace) {
         if(marker.line) {
             Lib.mergeArray(markerLine.color, cd, 'mlc');
             Lib.mergeArrayCastPositive(markerLine.width, cd, 'mlw');
+            Lib.mergeArray(markerLine.dash, cd, 'mld');
         }
 
         var markerGradient = marker.gradient;

src/traces/scatter/arrays_to_calcdata.js

@@ -555,6 +555,9 @@ module.exports = {
                         anim: true,
                         description: 'Sets the width (in px) of the lines bounding the marker points.'
                     },
+                    dash: extendFlat({}, dash, {
+                        arrayOk: true
+                    }),
                     editType: 'calc'
                 },
                 colorScaleAttrs('marker.line', { anim: true })

src/traces/scatter/attributes.js

@@ -12,70 +12,65 @@ var subTypes = require('./subtypes');
  *   gradient: caller supports gradients
  *   noSelect: caller does not support selected/unselected attribute containers
  */
-module.exports = function markerDefaults(traceIn, traceOut, defaultColor, layout, coerce, opts) {
+module.exports = function markerDefaults(traceIn, traceOut, defaultColor, layout, coerce, opts = {}) {
     var isBubble = subTypes.isBubble(traceIn);
     var lineColor = (traceIn.line || {}).color;
     var defaultMLC;
 
-    opts = opts || {};
-
     // marker.color inherit from line.color (even if line.color is an array)
-    if(lineColor) defaultColor = lineColor;
+    if (lineColor) defaultColor = lineColor;
 
     coerce('marker.symbol');
     coerce('marker.opacity', isBubble ? 0.7 : 1);
     coerce('marker.size');
-    if(!opts.noAngle) {
+    if (!opts.noAngle) {
         coerce('marker.angle');
-        if(!opts.noAngleRef) {
-            coerce('marker.angleref');
-        }
-
-        if(!opts.noStandOff) {
-            coerce('marker.standoff');
-        }
+        if (!opts.noAngleRef) coerce('marker.angleref');
+        if (!opts.noStandOff) coerce('marker.standoff');
     }
 
     coerce('marker.color', defaultColor);
-    if(hasColorscale(traceIn, 'marker')) {
-        colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
+    if (hasColorscale(traceIn, 'marker')) {
+        colorscaleDefaults(traceIn, traceOut, layout, coerce, { prefix: 'marker.', cLetter: 'c' });
     }
 
-    if(!opts.noSelect) {
+    if (!opts.noSelect) {
         coerce('selected.marker.color');
         coerce('unselected.marker.color');
         coerce('selected.marker.size');
         coerce('unselected.marker.size');
     }
 
-    if(!opts.noLine) {
+    if (!opts.noLine) {
         // if there's a line with a different color than the marker, use
         // that line color as the default marker line color
         // (except when it's an array)
         // mostly this is for transparent markers to behave nicely
-        if(lineColor && !Array.isArray(lineColor) && (traceOut.marker.color !== lineColor)) {
+        if (lineColor && !Array.isArray(lineColor) && traceOut.marker.color !== lineColor) {
             defaultMLC = lineColor;
-        } else if(isBubble) defaultMLC = Color.background;
-        else defaultMLC = Color.defaultLine;
+        } else if (isBubble) {
+            defaultMLC = Color.background;
+        } else {
+            defaultMLC = Color.defaultLine;
+        }
 
         coerce('marker.line.color', defaultMLC);
-        if(hasColorscale(traceIn, 'marker.line')) {
-            colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.line.', cLetter: 'c'});
+        if (hasColorscale(traceIn, 'marker.line')) {
+            colorscaleDefaults(traceIn, traceOut, layout, coerce, { prefix: 'marker.line.', cLetter: 'c' });
         }
 
         coerce('marker.line.width', isBubble ? 1 : 0);
+        if (!opts.noLineDash) coerce('marker.line.dash');
     }
 
-    if(isBubble) {
+    if (isBubble) {
         coerce('marker.sizeref');
         coerce('marker.sizemin');
         coerce('marker.sizemode');
     }
 
-    if(opts.gradient) {
+    if (opts.gradient) {
         var gradientType = coerce('marker.gradient.type');
-        if(gradientType !== 'none') {
-            coerce('marker.gradient.color');
-        }
+        if (gradientType !== 'none') coerce('marker.gradient.color');
     }
 };

src/traces/scatter/marker_defaults.js

@@ -32,7 +32,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('mode');
 
     if (subTypes.hasMarkers(traceOut)) {
-        handleMarkerDefaults(traceIn, traceOut, defaultColor, layout, coerce, { noSelect: true, noAngle: true });
+        handleMarkerDefaults(traceIn, traceOut, defaultColor, layout, coerce, {
+            noAngle: true,
+            noLineDash: true,
+            noSelect: true
+        });
     }
 
     if (subTypes.hasLines(traceOut)) {

src/traces/scatter3d/defaults.js

@@ -97,6 +97,7 @@ module.exports = {
             line: extendFlat(
                 {
                     width: scatterMarkerLineAttrs.width,
+                    dash: scatterMarkerLineAttrs.dash,
                     editType: 'calc'
                 },
                 colorScaleAttrs('marker.line')

src/traces/scattercarpet/attributes.js

@@ -139,7 +139,8 @@ module.exports = overrideAll(
                 colorbar: scatterMarkerAttrs.colorbar,
                 line: extendFlat(
                     {
-                        width: scatterMarkerLineAttrs.width
+                        width: scatterMarkerLineAttrs.width,
+                        dash: scatterMarkerLineAttrs.dash
                     },
                     colorAttributes('marker.line')
                 ),

src/traces/scattergeo/attributes.js

@@ -41,7 +41,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('mode', defaultMode);
 
     if (subTypes.hasMarkers(traceOut)) {
-        handleMarkerDefaults(traceIn, traceOut, defaultColor, layout, coerce, { noAngleRef: true, noStandOff: true });
+        handleMarkerDefaults(traceIn, traceOut, defaultColor, layout, coerce, {
+            noAngleRef: true,
+            noLineDash: true,
+            noStandOff: true
+        });
         coerce('marker.line.width', isOpen || isBubble ? 1 : 0);
     }