From de99bdc2fc44d293e4726c12363c444fbac39f7b Mon Sep 17 00:00:00 2001 From: chrimaho Date: Sat, 13 Dec 2025 08:37:28 +1100 Subject: [PATCH 1/8] Add support for dashed marker lines in scatter plots - Enable `marker.line.dash` attribute in scatter trace definitions with support for array values - Apply dash patterns to marker outlines in both open and closed marker styles - Merge dash data into calcdata for per-point dash styling - Include dash information in legend marker rendering to match trace appearance - Default dash handling falls back to trace-level `marker.line.dash` when per-point values are not specified --- src/components/drawing/index.js | 4 ++++ src/components/legend/style.js | 1 + src/traces/scatter/arrays_to_calcdata.js | 1 + src/traces/scatter/attributes.js | 4 ++++ src/traces/scatter/marker_defaults.js | 1 + 5 files changed, 11 insertions(+) diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js index 38e8686d102..198defe0cd1 100644 --- a/src/components/drawing/index.js +++ b/src/components/drawing/index.js @@ -965,6 +965,8 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) { } } + var lineDash = d.mld || (markerLine || {}).dash; + if (d.om) { // open markers can't have zero linewidth, default to 1px, // and use fill color as stroke color @@ -972,6 +974,7 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) { 'stroke-width': (lineWidth || 1) + 'px', fill: 'none' }); + drawing.dashLine(sel, lineDash, lineWidth || 1); } else { sel.style('stroke-width', (d.isBlank ? 0 : lineWidth) + 'px'); @@ -1057,6 +1060,7 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) { if (lineWidth) { Color.stroke(sel, lineColor); + drawing.dashLine(sel, lineDash, lineWidth); } } }; diff --git a/src/components/legend/style.js b/src/components/legend/style.js index 849271d3962..c62970cdc0d 100644 --- a/src/components/legend/style.js +++ b/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, diff --git a/src/traces/scatter/arrays_to_calcdata.js b/src/traces/scatter/arrays_to_calcdata.js index efa5332498c..07eac057140 100644 --- a/src/traces/scatter/arrays_to_calcdata.js +++ b/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; diff --git a/src/traces/scatter/attributes.js b/src/traces/scatter/attributes.js index 18231a889b7..c137543d612 100644 --- a/src/traces/scatter/attributes.js +++ b/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 }) diff --git a/src/traces/scatter/marker_defaults.js b/src/traces/scatter/marker_defaults.js index c4358730534..66c2a8dc8fd 100644 --- a/src/traces/scatter/marker_defaults.js +++ b/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) { From 8c1fdf2e0f11ae53aea903daccb2530cd52f4682 Mon Sep 17 00:00:00 2001 From: chrimaho Date: Sat, 13 Dec 2025 09:03:17 +1100 Subject: [PATCH 2/8] Add changelog entry for dashed marker line support - Document new feature that adds support for dashed marker lines in scatter plots - Reference pull request #7673 for tracking purposes --- draftlogs/7673_add.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/7673_add.md diff --git a/draftlogs/7673_add.md b/draftlogs/7673_add.md new file mode 100644 index 00000000000..d76f9595d12 --- /dev/null +++ b/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)] From d838891cdcb03dccda7989bea27506345285f370 Mon Sep 17 00:00:00 2001 From: chrimaho Date: Sat, 13 Dec 2025 10:26:21 +1100 Subject: [PATCH 3/8] Add dash attribute support to marker lines across scatter trace types - Extends marker line styling capabilities by including the `dash` attribute alongside existing `width` attribute - Enables dashed marker line borders for `scatter3d`, `scattercarpet`, `scattergeo`, `scattergl`, `scatterternary`, and `splom` trace types - Maintains consistency with base scatter trace marker line attributes by reusing `scatterMarkerLineAttrs.dash` - Applies appropriate constraints where needed, such as `arrayOk: false` for 3D traces and `editType: 'calc'` for other trace types --- src/traces/scatter3d/attributes.js | 3 ++- src/traces/scattercarpet/attributes.js | 1 + src/traces/scattergeo/attributes.js | 3 ++- src/traces/scattergl/attributes.js | 3 ++- src/traces/scatterternary/attributes.js | 1 + src/traces/splom/attributes.js | 1 + 6 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/traces/scatter3d/attributes.js b/src/traces/scatter3d/attributes.js index 17023178d28..cabbfa38c9c 100644 --- a/src/traces/scatter3d/attributes.js +++ b/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') ) diff --git a/src/traces/scattercarpet/attributes.js b/src/traces/scattercarpet/attributes.js index 68caaade24a..ded94305d8a 100644 --- a/src/traces/scattercarpet/attributes.js +++ b/src/traces/scattercarpet/attributes.js @@ -97,6 +97,7 @@ module.exports = { line: extendFlat( { width: scatterMarkerLineAttrs.width, + dash: scatterMarkerLineAttrs.dash, editType: 'calc' }, colorScaleAttrs('marker.line') diff --git a/src/traces/scattergeo/attributes.js b/src/traces/scattergeo/attributes.js index 0f8cede9834..f2fb2639cf8 100644 --- a/src/traces/scattergeo/attributes.js +++ b/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') ), diff --git a/src/traces/scattergl/attributes.js b/src/traces/scattergl/attributes.js index 8f05e9f5cc4..28203aea7ae 100644 --- a/src/traces/scattergl/attributes.js +++ b/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, diff --git a/src/traces/scatterternary/attributes.js b/src/traces/scatterternary/attributes.js index 5954d376f6f..c51c1abdfbb 100644 --- a/src/traces/scatterternary/attributes.js +++ b/src/traces/scatterternary/attributes.js @@ -126,6 +126,7 @@ module.exports = { line: extendFlat( { width: scatterMarkerLineAttrs.width, + dash: scatterMarkerLineAttrs.dash, editType: 'calc' }, colorScaleAttrs('marker.line') diff --git a/src/traces/splom/attributes.js b/src/traces/splom/attributes.js index 679337b30bd..70b422a4a7f 100644 --- a/src/traces/splom/attributes.js +++ b/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' }); From 0df71bb71f4f14c8cd0471e28a03cbddbf814693 Mon Sep 17 00:00:00 2001 From: chrimaho Date: Sat, 13 Dec 2025 12:43:47 +1100 Subject: [PATCH 4/8] Hide marker line for blank points in scatter plots - Prevent marker line borders from rendering on blank data points by setting line width to 0 when `d.isBlank` is true in the `singlePointStyle()` function - Add `dash` and `dashsrc` schema attributes for marker line styling across multiple chart types to support customisable dash patterns - Ensure blank points appear correctly without visible outlines while maintaining proper styling for non-blank markers --- src/components/drawing/index.js | 2 +- test/plot-schema.json | 295 ++++++++++++++++++++++++++++++++ 2 files changed, 296 insertions(+), 1 deletion(-) diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js index 198defe0cd1..d132167d217 100644 --- a/src/components/drawing/index.js +++ b/src/components/drawing/index.js @@ -1060,7 +1060,7 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) { if (lineWidth) { Color.stroke(sel, lineColor); - drawing.dashLine(sel, lineDash, lineWidth); + drawing.dashLine(sel, lineDash, d.isBlank ? 0 : lineWidth); } } }; diff --git a/test/plot-schema.json b/test/plot-schema.json index 211da680a56..fa0cb3c9466 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -17891,6 +17891,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.", @@ -19949,6 +19969,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.", @@ -36539,6 +36579,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.", @@ -41566,6 +41626,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.", @@ -60613,6 +60693,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 +64038,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.", @@ -65716,6 +65831,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", "gradient": { "color": { @@ -65817,6 +65952,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 +68278,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.", @@ -70511,6 +70686,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.", @@ -75980,6 +76175,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 +78441,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.", @@ -80482,6 +80717,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 +83055,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 +85291,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.", From 26eecd969b46a0999767f2388c38cff6fc765750 Mon Sep 17 00:00:00 2001 From: chrimaho Date: Sat, 13 Dec 2025 13:16:51 +1100 Subject: [PATCH 5/8] Add dash style property to marker line schemas - Add `dash` property to marker line configurations across multiple plot types, allowing customisation of line dash patterns - Support both predefined dash styles (`solid`, `dot`, `dash`, `longdash`, `dashdot`, `longdashdot`) and custom dash length lists in pixels - Include `dashsrc` property for Chart Studio Cloud integration to enable data source references for dash styling - Set default value to `solid` for consistent backward compatibility - Enable array support for most implementations to allow per-marker dash customisation --- dist/plot-schema.json | 295 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 295 insertions(+) diff --git a/dist/plot-schema.json b/dist/plot-schema.json index 211da680a56..fa0cb3c9466 100644 --- a/dist/plot-schema.json +++ b/dist/plot-schema.json @@ -17891,6 +17891,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.", @@ -19949,6 +19969,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.", @@ -36539,6 +36579,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.", @@ -41566,6 +41626,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.", @@ -60613,6 +60693,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 +64038,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.", @@ -65716,6 +65831,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", "gradient": { "color": { @@ -65817,6 +65952,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 +68278,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.", @@ -70511,6 +70686,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.", @@ -75980,6 +76175,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 +78441,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.", @@ -80482,6 +80717,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 +83055,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 +85291,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.", From 6ce3af49d967d49da814fcac53bc6fcdfb0c4c7d Mon Sep 17 00:00:00 2001 From: chrimaho Date: Sat, 13 Dec 2025 13:42:24 +1100 Subject: [PATCH 6/8] Fix failing CI for `text_on_shapes_basic` pixel comparison - Simplify the dash line styling implementation by replacing the single `.style()` call with an object parameter with chained `.style()` method calls - Set `stroke-dasharray` to `null` when dash is falsy to properly clear the style rather than setting it to an empty or undefined value - Improve code readability through method chaining pattern --- src/components/drawing/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js index d132167d217..9280ceb1aa6 100644 --- a/src/components/drawing/index.js +++ b/src/components/drawing/index.js @@ -193,10 +193,8 @@ drawing.dashLine = function (s, dash, lineWidth) { dash = drawing.dashStyle(dash, lineWidth); - s.style({ - 'stroke-dasharray': dash, - 'stroke-width': lineWidth + 'px' - }); + s.style('stroke-width', lineWidth + 'px') + .style('stroke-dasharray', dash || null); }; drawing.dashStyle = function (dash, lineWidth) { From 753c6ed0f07697ef7f24dac89d9846257e1ddad5 Mon Sep 17 00:00:00 2001 From: chrimaho Date: Sun, 14 Dec 2025 08:52:40 +1100 Subject: [PATCH 7/8] Simplify stroke styling and remove unused dash line logic - Consolidate style application in `dashLine()` function to use object notation instead of chained method calls - Remove unused `lineDash` variable and associated `dashLine()` calls in marker styling logic - Eliminate redundant dash line styling for open markers and blank points that was not being applied correctly --- src/components/drawing/index.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js index 9280ceb1aa6..38e8686d102 100644 --- a/src/components/drawing/index.js +++ b/src/components/drawing/index.js @@ -193,8 +193,10 @@ drawing.dashLine = function (s, dash, lineWidth) { dash = drawing.dashStyle(dash, lineWidth); - s.style('stroke-width', lineWidth + 'px') - .style('stroke-dasharray', dash || null); + s.style({ + 'stroke-dasharray': dash, + 'stroke-width': lineWidth + 'px' + }); }; drawing.dashStyle = function (dash, lineWidth) { @@ -963,8 +965,6 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) { } } - var lineDash = d.mld || (markerLine || {}).dash; - if (d.om) { // open markers can't have zero linewidth, default to 1px, // and use fill color as stroke color @@ -972,7 +972,6 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) { 'stroke-width': (lineWidth || 1) + 'px', fill: 'none' }); - drawing.dashLine(sel, lineDash, lineWidth || 1); } else { sel.style('stroke-width', (d.isBlank ? 0 : lineWidth) + 'px'); @@ -1058,7 +1057,6 @@ drawing.singlePointStyle = function (d, sel, trace, fns, gd, pt) { if (lineWidth) { Color.stroke(sel, lineColor); - drawing.dashLine(sel, lineDash, d.isBlank ? 0 : lineWidth); } } }; From 6de355d47a5b0634f54e399379d410936c8ece1d Mon Sep 17 00:00:00 2001 From: chrimaho <44449504+chrimaho@users.noreply.github.com> Date: Sun, 14 Dec 2025 01:19:17 +0000 Subject: [PATCH 8/8] update plot-schema diff --- test/plot-schema.json | 108 ++---------------------------------------- 1 file changed, 4 insertions(+), 104 deletions(-) diff --git a/test/plot-schema.json b/test/plot-schema.json index fa0cb3c9466..0fc92fa7ea7 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -17891,26 +17891,6 @@ "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.", @@ -19969,26 +19949,6 @@ "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.", @@ -36579,26 +36539,6 @@ "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.", @@ -41626,26 +41566,6 @@ "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.", @@ -65831,26 +65751,6 @@ "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", "gradient": { "color": { @@ -68282,7 +68182,7 @@ "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", + "editType": "calc", "valType": "string", "values": [ "solid", @@ -70690,7 +70590,7 @@ "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", + "editType": "calc", "valType": "string", "values": [ "solid", @@ -78445,7 +78345,7 @@ "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", + "editType": "calc", "valType": "string", "values": [ "solid", @@ -85295,7 +85195,7 @@ "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", + "editType": "calc", "valType": "string", "values": [ "solid",