plotly / plotly/plotly.js

add trace `legendItem` styles

Open
#3,735 11 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

cs feature P2
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

I'm thinking of adding a new trace attribute container: legenditem

{
  x: [/* */],
  y: [/* */],
  legenditem: {
    textfont: {
       color: 'red'
       size: 12
     },
     marker: {
       size: 20,
       symbol: 'circle',
       line: {width: 2, color: '#444'}
     }
  }
}

to the scatter*, bar* and pie traces to make their legend item styling configurable. This would be an easy (easier than @alexcjohnson 's legend 2.0 idea 😏 ) solution to https://github.com/plotly/plotly.js/issues/2967, https://github.com/plotly/plotly.js/issues/2080, https://github.com/plotly/plotly.js/issues/1701 and https://github.com/plotly/plotly.js/issues/1560


By the way, I'm thinking a naming this new container legenditem and not legend as I'm thinking legend could eventually be used when we implement multiple legends where e.g. legend: 'legend2' would mean "put this trace's legend item in the second legend".

One more note on @alexcjohnson 's legend 2.0 idea: having legenditem in traces wouldn't make it obsolete. We could still add a way to turn annotations into legend items later.

Thoughts?

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 by reviewing the four linked issues (#2967, #2080, #1701, and #1560) to understand the requested legend behavior and unresolved design questions. Define the scope for a trace-level legenditem container across scatter*, bar*, and pie traces; done should mean the styling requirements and implementation boundaries are agreed.

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
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.