leeoniya / leeoniya/uPlot

Setting Legend Markers using Paths

Open
#941 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Thanks for the great library :)

I'm currently using uPlot to draw plots with custom markers, e.g. triangles, squares, stars etc, like done in this demo.
It would be useful for users to see these markers in the legend.

If I'm not missing something, it seems the current uPlot api does not allow setting a canvas Path in the legend and relies primarily on CSS for styling the legend markers.

Would it be possible to add something like this to the API?

Alternatives I'm aware of:

  • maintaining my own legend div (like Grafana)
  • setting the u-marker div once uPlot has finished drawing
  • using emoji shapes in the u-label div
  • drawing these markers using CSS

These options all seem like (possibly hacky) workarounds.
Are there any other reasonable options?

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 by reviewing the current legend-marker API and the draw-hooks demo linked in the issue, then compare how custom canvas paths and CSS markers are handled. Clarify the API and rendering behavior needed for legend markers, and consider how completion would be verified for triangle, square, or star markers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.