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/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,10 @@ module.exports = {
                         anim: true,
                         description: 'Sets the width (in px) of the lines bounding the marker points.'
                     },
+                    dash: extendFlat({}, dash, {
+                        arrayOk: true,
+                        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

@@ -150,7 +150,8 @@ var attrs = (module.exports = overrideAll(
 
                 line: extendFlat(
                     {
-                        width: extendFlat({}, scatterMarkerLineAttrs.width, { arrayOk: false })
+                        width: extendFlat({}, scatterMarkerLineAttrs.width, { arrayOk: false }),
+                        dash: extendFlat({}, scatterMarkerLineAttrs.dash, { arrayOk: false })
                     },
                     colorAttributes('marker.line')
                 )

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

@@ -83,7 +83,8 @@ var attrs = (module.exports = overrideAll(
             opacity: scatterMarkerAttrs.opacity,
             colorbar: scatterMarkerAttrs.colorbar,
             line: extendFlat({}, colorScaleAttrs('marker.line'), {
-                width: scatterMarkerLineAttrs.width
+                width: scatterMarkerLineAttrs.width,
+                dash: scatterMarkerLineAttrs.dash
             })
         }),
         connectgaps: scatterAttrs.connectgaps,

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

@@ -14,6 +14,7 @@ var scatterMarkerLineAttrs = scatterMarkerAttrs.line;
 
 var markerLineAttrs = extendFlat(colorScaleAttrs('marker.line', { editTypeOverride: 'calc' }), {
     width: extendFlat({}, scatterMarkerLineAttrs.width, { editType: 'calc' }),
+    dash: extendFlat({}, scatterMarkerLineAttrs.dash, { editType: 'calc' }),
     editType: 'calc'
 });
 

test/plot-schema.json

@@ -60613,6 +60613,26 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": true,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "style",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
+            "dashsrc": {
+              "description": "Sets the source reference on Chart Studio Cloud for `dash`.",
+              "editType": "none",
+              "valType": "string"
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",
@@ -63938,6 +63958,21 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": false,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "calc",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",
@@ -65817,6 +65852,26 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": true,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "style",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
+            "dashsrc": {
+              "description": "Sets the source reference on Chart Studio Cloud for `dash`.",
+              "editType": "none",
+              "valType": "string"
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",
@@ -68123,6 +68178,26 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": true,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "calc",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
+            "dashsrc": {
+              "description": "Sets the source reference on Chart Studio Cloud for `dash`.",
+              "editType": "none",
+              "valType": "string"
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",
@@ -70511,6 +70586,26 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": true,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "calc",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
+            "dashsrc": {
+              "description": "Sets the source reference on Chart Studio Cloud for `dash`.",
+              "editType": "none",
+              "valType": "string"
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",
@@ -75980,6 +76075,26 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": true,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "style",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
+            "dashsrc": {
+              "description": "Sets the source reference on Chart Studio Cloud for `dash`.",
+              "editType": "none",
+              "valType": "string"
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",
@@ -78226,6 +78341,26 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": true,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "calc",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
+            "dashsrc": {
+              "description": "Sets the source reference on Chart Studio Cloud for `dash`.",
+              "editType": "none",
+              "valType": "string"
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",
@@ -80482,6 +80617,26 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": true,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "style",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
+            "dashsrc": {
+              "description": "Sets the source reference on Chart Studio Cloud for `dash`.",
+              "editType": "none",
+              "valType": "string"
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",
@@ -82800,6 +82955,26 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": true,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "style",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
+            "dashsrc": {
+              "description": "Sets the source reference on Chart Studio Cloud for `dash`.",
+              "editType": "none",
+              "valType": "string"
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",
@@ -85016,6 +85191,26 @@
               "editType": "none",
               "valType": "string"
             },
+            "dash": {
+              "arrayOk": true,
+              "description": "Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).",
+              "dflt": "solid",
+              "editType": "calc",
+              "valType": "string",
+              "values": [
+                "solid",
+                "dot",
+                "dash",
+                "longdash",
+                "dashdot",
+                "longdashdot"
+              ]
+            },
+            "dashsrc": {
+              "description": "Sets the source reference on Chart Studio Cloud for `dash`.",
+              "editType": "none",
+              "valType": "string"
+            },
             "editType": "calc",
             "reversescale": {
               "description": "Reverses the color mapping if true. Has an effect only if in `marker.line.color` is set to a numerical array. If true, `marker.line.cmin` will correspond to the last color in the array and `marker.line.cmax` will correspond to the first color.",