leeoniya / leeoniya/uPlot

Points fill and cursor marker issues in dark mode

Open
#780 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
10.5k
Forks
463
PR merge metrics
No merged PRs in 30d

Description

With a white background the std points fill and cursor markers work fine. However, on a dark background they don't.
Repro: https://codepen.io/codesurfr/pen/vYaNwwR

  • this is a copy of https://leeoniya.github.io/uPlot/demos/grid-over-series.html with the body background changed to #1e1e1e
  • the points size is enlarged to 10pts so one can see stuff better
  • the red series has no other change, notice how the points are filled with white instead of the background color
  • the blue and green series fix that by setting the points fill to the same as the background color, however now the cursor marker no longer works properly because it uses the points fill color
  • it is possible to completely fix the issue by defining the cursor points fill explicitly, see commented out code in the codepen

Is this a desired/intended state of the built-in cursor? Dark backgrounds are pretty popular for plots...

Maybe there should be an opts.dark or opts.background_color type of option passed to uPlot so it can do something more sensible by default?

Quick screen grab showing the points (no cursor here):
image

Contributor guide

No contributing guide indexed for this repository

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 compare the built-in points and cursor marker behavior on the dark background. Trace how the built-in cursor derives its point fill and determine a consistent default that keeps both series points and cursor markers correct without explicit cursor-point overrides; done means the reproduction works on dark backgrounds.

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
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.