-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Add support for dashed marker lines in scatter plots #7673
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
chrimaho
wants to merge
8
commits into
plotly:master
Choose a base branch
from
chrimaho:feature-marker-line-dash-7667
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+507
−3
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📝 Overview
Introduce support for customising marker line dash patterns in scatter plots, addressing issue #7667.
Currently, the
marker.lineobject only supports properties likecolorandwidth. This PR exposes thedashproperty, 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
dashattribute, process it during the calculation step, and render it correctly in both the plot and the legend.Scatter marker line dash support
dashas a supported property in themarker.lineattribute for scatter traces insrc/traces/scatter/attributes.js, including array support.src/traces/scatter/marker_defaults.jsto coercemarker.line.dashvalues, ensuring the property is initialised properly.src/traces/scatter/arrays_to_calcdata.jsto mergemarker.line.dashvalues into the calculated data array (cd) asmld, enabling per-point dash customisation.Rendering updates
drawing.singlePointStylewithinsrc/components/drawing/index.jsto apply the dash pattern to marker outlines. This support both open markers (where the border is the main visual) and closed markers.drawing.dashLineto apply the dash style.src/components/legend/style.jsto includemarker.line.dashin 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) orshapes(which distort with axis scaling).Example Usage: (Python)
Closes #7667