Skip to content

Conversation

@chrimaho
Copy link

@chrimaho chrimaho commented Dec 12, 2025

📝 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
chrimaho and others added 6 commits December 13, 2025 10:26
- 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant