Add support for dashed marker lines in scatter plots

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)]

src/components/drawing/index.js

@@ -975,6 +975,9 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) {
     } else {
         sel.style('stroke-width', (d.isBlank ? 0 : lineWidth) + 'px');
 
+        const lineDash = d.mld || (markerLine || {}).dash;
+        if(lineDash) drawing.dashLine(sel, lineDash, lineWidth);
+
         var markerGradient = marker.gradient;
 
         var gradientType = d.mgt;

src/components/legend/style.js

@@ -221,6 +221,7 @@ module.exports = function style(s, gd, legend) {
                 dEdit.mo = boundVal('marker.opacity', Lib.mean, [0.2, 1]);
                 dEdit.mlc = boundVal('marker.line.color', pickFirst);
                 dEdit.mlw = boundVal('marker.line.width', Lib.mean, [0, 5], CST_MARKER_LINE_WIDTH);
+                dEdit.mld = boundVal('marker.line.dash', pickFirst);
                 tEdit.marker = {
                     sizeref: 1,
                     sizemin: 1,

src/traces/scatter/arrays_to_calcdata.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/attributes.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/marker_defaults.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/scatter3d/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/scattercarpet/attributes.js

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

src/traces/scattergeo/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/scattergl/defaults.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);
     }
 

src/traces/scatterpolargl/defaults.js

@@ -33,7 +33,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     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
+        });
     }
 
     if (subTypes.hasLines(traceOut)) {

src/traces/scatterternary/attributes.js

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

src/traces/splom/defaults.js

@@ -37,7 +37,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('xhoverformat');
     coerce('yhoverformat');
 
-    handleMarkerDefaults(traceIn, traceOut, defaultColor, layout, coerce, { noAngleRef: true, noStandOff: true });
+    handleMarkerDefaults(traceIn, traceOut, defaultColor, layout, coerce, {
+        noAngleRef: true,
+        noLineDash: true,
+        noStandOff: true
+    });
 
     var isOpen = isOpenSymbol(traceOut.marker.symbol);
     var isBubble = subTypes.isBubble(traceOut);

test/image/mocks/zz-scatter_marker_line_dash.json

@@ -0,0 +1,82 @@
+{
+  "data": [
+    {
+      "type": "scatter",
+      "mode": "markers",
+      "x": [1, 2, 3, 4, 5, 6],
+      "y": [1, 1, 1, 1, 1, 1],
+      "marker": {
+        "size": 30,
+        "color": "white",
+        "line": {
+          "color": "black",
+          "width": 3,
+          "dash": ["solid", "dot", "dash", "longdash", "dashdot", "longdashdot"]
+        }
+      },
+      "name": "Array of dashes"
+    },
+    {
+      "type": "scatter",
+      "mode": "markers",
+      "x": [1, 2, 3, 4, 5, 6],
+      "y": [2, 2, 2, 2, 2, 2],
+      "marker": {
+        "size": 30,
+        "color": "rgba(255,0,0,0.2)",
+        "line": {
+          "color": "red",
+          "width": 4,
+          "dash": "dash"
+        }
+      },
+      "name": "Single dash"
+    },
+    {
+      "type": "scatter",
+      "mode": "markers",
+      "x": [1, 2, 3, 4, 5, 6],
+      "y": [3, 3, 3, 3, 3, 3],
+      "marker": {
+        "size": 30,
+        "symbol": "square",
+        "color": "white",
+        "line": {
+          "color": "blue",
+          "width": 2,
+          "dash": "dot"
+        }
+      },
+      "name": "Dot with squares"
+    },
+    {
+      "type": "scatter",
+      "mode": "markers",
+      "x": [1, 2, 3, 4, 5, 6],
+      "y": [4, 4, 4, 4, 4, 4],
+      "marker": {
+        "size": 30,
+        "symbol": "circle-open",
+        "line": {
+          "color": "green",
+          "width": 2,
+          "dash": "dash"
+        }
+      },
+      "name": "Open markers with dash"
+    }
+  ],
+  "layout": {
+    "title": {
+      "text": "Scatter Marker Line Dash Support"
+    },
+    "xaxis": {
+      "range": [0, 7]
+    },
+    "yaxis": {
+      "range": [0, 5]
+    },
+    "width": 600,
+    "height": 400
+  }
+}