plotly / plotly/plotly.js

Errorbars on scatter plots don't react to point selection

Open
#7,305 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug good for agent
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

If you make a plot with errorbars, they aren't affected at all by selections. This both looks weird (like part of your point was left behind when it became deselected) and can cause usability problems, in that it's harder to distinguish selected and unselected points, particularly if the points themselves are small.

The simple solution here would be to include the errorbars in the group that responds to marker.opacity. That also seems the most correct, as you shouldn't see an errorbar through a partially transparent marker, and intuitively I'd expect errorbars to become transparent along with their associated markers. I think that would cover most use cases, though including some errorbar attributes like color and thickness in the selected and unselected styles would also be nice.

A tricky bit here is that normally errorbars are drawn behind lines but markers are in front of lines, so they can't just be combined with the markers. I suspect the right solution is to only put them behind the lines when there are no markers, but when there are markers bring them up to just behind and grouped with each marker.

Relatedly, no errorbar attributes other than array and arrayminus accept arrays. Enabling color in particular to be an array would be useful, and could mostly work around the main issue here in some cases, though I wouldn't call it a full solution.

https://codepen.io/alexcjohnson/pen/RNbGamp?editors=0010
Image

To be clear: I don't think we should select the errorbars themselves - just select the points and bring the errorbars along for the ride.

Interestingly, errorbars on bar charts already behave correctly:

Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodePen reproduction and inspect how scatter-plot errorbars are rendered relative to markers and lines during point selection. Compare their behavior with errorbars on bar charts, then verify that selecting points also changes the associated errorbars without selecting the errorbars independently.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.