Add support for dashed marker lines in scatter plots by chrimaho · Pull Request #7673 · plotly/plotly.js · GitHub

📝 Overview

Introduce support for customising marker line dash patterns in scatter plots, addressing issue #7667.

Currently, the marker.line object only supports properties like color and width. This PR exposes the dash property, allowing users to specify dash styles (e.g., "dash", "dot", "solid") or custom dash lengths for marker borders. This feature is essential for creating clear visual distinctions in scatter plots, such as distinguishing between original and imputed data points, without relying solely on colour or marker symbols.

🛠️ Implementation Details

The implementation involves changes across several files to enable the dash attribute, process it during the calculation step, and render it correctly in both the plot and the legend.

Scatter marker line dash support

Attributes: Add dash as a supported property in the marker.line attribute for scatter traces in src/traces/scatter/attributes.js, including array support.
Defaults: Update marker defaults in src/traces/scatter/marker_defaults.js to coerce marker.line.dash values, ensuring the property is initialised properly.
Calcdata: Enhance data preparation in src/traces/scatter/arrays_to_calcdata.js to merge marker.line.dash values into the calculated data array (cd) as mld, enabling per-point dash customisation.

Rendering updates

Drawing: Update the drawing logic in drawing.singlePointStyle within src/components/drawing/index.js to apply the dash pattern to marker outlines. This support both open markers (where the border is the main visual) and closed markers.
- Use drawing.dashLine to apply the dash style.
Legend: Modify legend styling in src/components/legend/style.js to include marker.line.dash in legend item representations, ensuring the legend matches the trace appearance.

🚀 Use Case & Example

This feature allow for perfect, fixed-size circles with dashed outlines, which was previously not possible with markers (only solid lines) or shapes (which distort with axis scaling).

Example Usage: (Python)

import plotly.graph_objects as go

fig = go.Figure(
    go.Scatter(
        mode="markers",
        x=[1, 2, 3],
        y=[1, 2, 3],
        marker=dict(
            size=20,
            color="white",
            line=dict(
                color="red",
                width=2,
                dash="dash"  # <--- New Feature
            )
        )
    )
)

current state	target state

Closes #7667

- 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

- Document new feature that adds support for dashed marker lines in scatter plots - Reference pull request plotly#7673 for tracking purposes

- 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

- 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

- 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

- 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

- 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

Thanks for putting this PR together! You've done part of the work, but you'll need to update src/components/drawing/index.js to get the dashed lines to draw. On line 967, if you add the following, you should see the dashes:

const lineDash = d.mld || (markerLine || {}).dash;
if (lineDash) drawing.dashLine(sel, lineDash, lineWidth);

Additionally, there are some traces that won't be compatible with this change due to not being supported in WebGL. Could you please remove the following traces from this PR?:

scatter3d
scattergl
splom

From my research, these traces seem like they would most benefit from this feature:

scatter
scatterpolar
scattergeo
scattermap
scattercarpet
scatterternary
scattersmith

Could you add this feature to all of these traces?

Could you please remove this file from the PR? It only gets updated during releases.

Done in 8573067

This property already exists on the dash object, so it isn't needed here.

Suggested change

editType: 'style'

Done in 6fa75bc

You removed the wrong line. arrayOk: true is still needed. editType: 'style' should be removed.

Corrected in 3dd16f7

Please remove the changes for scatter3d. A dashed line isn't supported at the moment since it doesn't use SVG.

Done in ac01dc3

It looks like the ending new line was deleted. Could you add it back please?

Done in f733505

Please remove the changes for scattergl. A dashed line isn't supported at the moment since it doesn't use SVG.

Done in ac01dc3

It looks like the ending new line was deleted. Could you add it back please?

Done in f733505

Please remove the changes for splom. A dashed line isn't supported at the moment since it doesn't use SVG.

Done in ac01dc3

It looks like the ending new line was deleted. Could you add it back please?

Done in f733505

…catter` plot

…& `splom` traces. Revert to the changes from the `master` branch

Thanks for the help @camdecoster! Really appreciate it.

You've done part of the work, but you'll need to update src/components/drawing/index.js to get the dashed lines to draw. On line 967, if you add the following, you should see the dashes:
const lineDash = d.mld || (markerLine || {}).dash;
if (lineDash) drawing.dashLine(sel, lineDash, lineWidth);

I have updated this part ☝️ in commit f348454.

Additionally, there are some traces that won't be compatible with this change due to not being supported in WebGL. Could you please remove the following traces from this PR?:

scatter3d

scattergl

splom

I have implemented this part ☝️ in commit ac01dc3

From my research, these traces seem like they would most benefit from this feature:

scatter

scatterpolar

scattergeo

scattermap

scattercarpet

scatterternary

scattersmith

For traces scatterpolar, scattergeo, scattercarpet, scatterternary, and scattersmith, they all look like they inherit their attributes, defaults, and calculation logic from scatter. So I'm not sure what changes to make here? It seems they will automatically benefit from the changes? Am I correct here, or am I missing something?

For scattermap, it seems like it uses Mapbox GL JS for rendering? When I take a look under the hood, it seems like Mapbox's circle layer (which is used for markers) does not currently support dashed strokes, as the circle-stroke-dasharray is not a valid property on the Mapbox Style Specification. So, again, I'm not sure if I can do anything here? Can you please validate if I am correct?

Thank you again, I really appreciate your support.

There are a few more minor changes to make. And you're right, scattermap does use WebGL so that should be skipped. Could you please add a new test mock (or modify an existing one) to make sure the marker line dash is working?

You removed the wrong line. arrayOk: true is still needed. editType: 'style' should be removed.

It looks like the ending new line was deleted. Could you add it back please?

You'll also need to update the plot schema and commit that to fix the failing test.

@chrimaho are you still interested in finishing this PR?

- In the `attributes.js` file for the traces `scatter3d`, `scattergl`, and `splom`

- Enable array support for the `dash` attribute. - Correct line from `editType: 'style'` to `arrayOk: true`

- Introduce a new mock data file for testing scatter marker line dash - Implement tests for marker line dash functionality - Validate support for array of dashes in markers - Ensure marker line dash is displayed in the legend - Confirm marker line dash updates via restyle - Test marker line dash on open markers

There are a few more minor changes to make. And you're right, scattermap does use WebGL so that should be skipped. Could you please add a new test mock (or modify an existing one) to make sure the marker line dash is working?

Done in 7eb1943

You'll also need to update the plot schema and commit that to fix the failing test.

Done in 90ab105

@chrimaho are you still interested in finishing this PR?

Hi @camdecoster, thanks for the bump. Yes, I'm still very keen on this PR.
I have made the changes you have requested. Can you please check and let me know if there is anything else you'd like changed?

Thank you kindly.

…-dash-7667

This reverts commit d4d4972.

@chrimaho I went down a rabbit hole trying to get one of the new tests to pass, which led to a number of updates. Ultimately, I think this PR is ready to go. For now, the legend markers associated with shape traces won't show the line dash. This was deemed to be a "breaking" change and will be added in a future major revision. But the rest of it works as you intended. Thanks for the contribution!

@camdecoster, thank you so much! Really appreciate your support 👍

chrimaho added 2 commits December 13, 2025 08:37

Add changelog entry for dashed marker line support

8c1fdf2

- Document new feature that adds support for dashed marker lines in scatter plots - Reference pull request plotly#7673 for tracking purposes

chrimaho mentioned this pull request Dec 12, 2025

[FEATURE]: Allow dashed borders for scatter plot markers (marker.line.dash) #7667

Closed

chrimaho and others added 6 commits December 13, 2025 10:26

update plot-schema diff

6de355d

robertclaus requested a review from camdecoster December 17, 2025 16:40

robertclaus assigned camdecoster Dec 17, 2025

camdecoster requested changes Dec 18, 2025

View reviewed changes

chrimaho added 4 commits December 20, 2025 16:30

Revert plot-schema to version from master branch

8573067

Remove arrayOk attribute from the marker.line attribute of the `s…

6fa75bc

…catter` plot

Remove marker.line.dash changes from the scatter3d, scattergl, …

ac01dc3

…& `splom` traces. Revert to the changes from the `master` branch

Implement logic to actually draw the dashed lines

f348454

camdecoster requested changes Jan 5, 2026

View reviewed changes

camdecoster assigned chrimaho and unassigned camdecoster Jan 16, 2026

chrimaho added 3 commits January 19, 2026 07:55

Fix missing end of file newline

f733505

- In the `attributes.js` file for the traces `scatter3d`, `scattergl`, and `splom`

Add arrayOk attribute to marker.line.dash for scatter plots.

3dd16f7

- Enable array support for the `dash` attribute. - Correct line from `editType: 'style'` to `arrayOk: true`

Update plot-schema diff

90ab105

Rename test file

e8a702d

camdecoster added 14 commits January 29, 2026 13:54

Update mock layout

cddc465

Linting/formatting

67458e7

Don't coerce marker.line.dash for some traces

65a0d87

Enable dash styles for open markers

5fbbac5

Update mock styles

05e851f

Fix failing test

869367e

Add basline image for mock

9361e7e

Merge remote-tracking branch 'origin/master' into feature-marker-line…

6a3273e

…-dash-7667

Update baseline image per PR changes

d4d4972

Update draftlog

ebdb604

Linting/formatting

cbd4dd2

Revert "Update baseline image per PR changes"

f7f9714

This reverts commit d4d4972.

Don't use dash in legend markers for shape traces

2edd723

Add test to check for shape legend marker dashes

f698f6b

camdecoster approved these changes Feb 2, 2026

View reviewed changes

camdecoster merged commit 7d71314 into plotly:master Feb 2, 2026
5 checks passed

camdecoster mentioned this pull request Feb 3, 2026

[FEATURE]: Enable dashed legend markers for shape traces #7701

Closed

chrimaho mentioned this pull request Feb 3, 2026

[FEATURE]: Allow dashed borders for scatter plot markers (marker.line.dash) plotly/plotly.py#5499

Open

camdecoster mentioned this pull request Jun 16, 2026

feat: Use dashed markers in legend for shape traces #7845

Merged

                                   },
+                                  dash: extendFlat({}, dash, {
+                                      arrayOk: true,
+                                      editType: 'style'

                                   },
+                                  dash: extendFlat({}, dash, {
+                                      arrayOk: true,
+                                      editType: 'style'

Add support for dashed marker lines in scatter plots by chrimaho · Pull Request #7673 · plotly/plotly.js · GitHub

Uh oh!

Uh oh!

Add support for dashed marker lines in scatter plots - #7673

Add support for dashed marker lines in scatter plots#7673camdecoster merged 31 commits intoplotly:masterplotly/plotly.js:masterfrom chrimaho:feature-marker-line-dash-7667chrimaho/plotly.js:feature-marker-line-dash-7667Copy head branch name to clipboard

Conversation

chrimaho commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Overview

🛠️ Implementation Details

Scatter marker line dash support

Rendering updates

🚀 Use Case & Example

Uh oh!

camdecoster left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chrimaho Dec 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chrimaho commented Dec 20, 2025

Uh oh!

camdecoster left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

camdecoster commented Jan 5, 2026

Uh oh!

camdecoster commented Jan 16, 2026

Uh oh!

chrimaho commented Jan 18, 2026

Uh oh!

chrimaho commented Jan 18, 2026

Uh oh!

chrimaho commented Jan 18, 2026

Uh oh!

camdecoster left a comment

Choose a reason for hiding this comment

Add support for dashed marker lines in scatter plots#7673
camdecoster merged 31 commits into
plotly:masterfrom
chrimaho:feature-marker-line-dash-7667

chrimaho commented Dec 12, 2025 •
edited
Loading

chrimaho Dec 20, 2025 •
edited
Loading