Add support for dashed marker lines in scatter plots

[chrimaho]

📝 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

[camdecoster]

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?

[camdecoster]

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

[camdecoster]

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

Suggested change

editType: 'style'

[camdecoster]

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

[camdecoster]

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

[camdecoster]

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