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, {
+                        editType: 'style'
+                    }),
                     editType: 'calc'
                 },
                 colorScaleAttrs('marker.line', { anim: true })

src/traces/scatter/marker_defaults.js

@@ -64,6 +64,7 @@ module.exports = function markerDefaults(traceIn, traceOut, defaultColor, layout
         }
 
         coerce('marker.line.width', isBubble ? 1 : 0);
+        coerce('marker.line.dash');
     }
 
     if(isBubble) {

src/traces/scatter3d/attributes.js

@@ -178,4 +178,4 @@ var attrs = (module.exports = overrideAll(
     'nested'
 ));
 
-attrs.x.editType = attrs.y.editType = attrs.z.editType = 'calc+clearAxisTypes';
+attrs.x.editType = attrs.y.editType = attrs.z.editType = 'calc+clearAxisTypes';

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/attributes.js

@@ -111,4 +111,4 @@ attrs.x.editType = attrs.y.editType = attrs.x0.editType = attrs.y0.editType = 'c
 attrs.hovertemplate = scatterAttrs.hovertemplate;
 attrs.hovertemplatefallback = scatterAttrs.hovertemplatefallback;
 attrs.texttemplate = scatterAttrs.texttemplate;
-attrs.texttemplatefallback = scatterAttrs.texttemplatefallback;
+attrs.texttemplatefallback = scatterAttrs.texttemplatefallback;

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/attributes.js

@@ -183,4 +183,4 @@ module.exports = {
     },
 
     opacity: scatterGlAttrs.opacity
-};
+};