plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

Trace `legendItem` styles

Open etpinard opened this issue 5 years ago • 9 comments

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 :smirk: ) 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?

etpinard avatar Apr 05 '19 16:04 etpinard

Oh sure, if legends 2.0 ever happens it would play just fine with this. Great idea 💯

alexcjohnson avatar Apr 05 '19 17:04 alexcjohnson

Would this idea replace #3732 or would we still continue with that?

alexcjohnson avatar Apr 05 '19 17:04 alexcjohnson

Would this idea replace #3732 or would we still continue with that?

This ticket will augment (not replace) #3732

etpinard avatar Apr 05 '19 18:04 etpinard

I know I am a random nobody Intruding on this conversation but I have a team of data analysts that want to switch to plotly but struggle with the legend versatility (we have a variety of complicated custom plots) 3732 would greatly help. Any plans to put this in ?

kris16034 avatar Apr 15 '20 03:04 kris16034

@etpinard I know this is an older ticket but it's still a limitation for us. In our case, we have traces with multiple symbols. Right now, the legend symbol is always whatever symbol is used for the first point, which is quite confusing to our users. It would be great to have the option to specify the legend marker as you outlined in your initial comment. Any chance this will get implemented in the near future?

brian428 avatar Feb 05 '21 18:02 brian428

Honestly even an option to just always use a standard circle would work for us, if exposing all the other style options would be significant work. Maybe just an itemsymbol: "constant" option to go along with the itemsizing option?

brian428 avatar Feb 05 '21 18:02 brian428

This was an issue for a plot where I put a border around the bar with the highest value. To avoid getting a border around the legend item when the first bar is the winner, I just added buffers ([' '] and [0]) to the x and y vectors and set the xaxis range to [1:len(y)]. Not ideal, but it let me keep my square legend items, consistent with other plots.

jleape avatar Mar 10 '21 17:03 jleape

Any developments on this question? I can offer the following as a use case:

Within each trace I color markers and marker borders according to various criteria—but this means that when the legend is generated, marker colors and borders come out in odd combinations. It would be ideal to be able to set the legend marker color and border manually.

(I should mention that the above is with plotly.py.)

PlatosTwin avatar Apr 19 '21 20:04 PlatosTwin

Any updates on this issue?

rom3k avatar Jan 16 '24 13:01 rom3k

transparent-legends

Would be great to be able to remove legenditem marker transparency for a case like this

mhangaard avatar Feb 21 '24 12:02 mhangaard

One workaround is to update the DOM after the graph is rendered, e.g. this sets all icons to a circle (even if the first item in the trace is e.g. a square):

for (let el of document.querySelectorAll('.legendpoints .scatterpts')) { 
    el.setAttribute('d', 'M5,0A5,5 0 1,1 0,-5A5,5 0 0,1 5,0Z'); 
}

janjongboom avatar Jun 19 '24 08:06 janjongboom