Label color in legend

[collioud]

Hi,

It would be nice to have an option to automatically set the legend label to the color of the corresponding marker.

For example, amCharts is using a parameter named 'useMarkerColorForLabels' in the config object.

Thanks in advance!

[etpinard]

That would be nice. I would prefer this being part of more general legend item style attributes then a one-off boolean, but oh well.

Here's a workaround in the meantime: https://codepen.io/etpinard/pen/ybRyVp?editors=0010

[collioud]

Thanks!
Indeed, HTML styling can do the job failrly well.

Cheers

[rpaskowitz]

I've got a quick branch with this, currently implementing a legend.fontColorStyle attribute with values of default for current behaviour, which reads from legend.font, or trace which takes the trace color (needs a bit of work to match the same logic as in style.js).

On other place I thought to put this would be on the trace data itself. It could be set to default to use the legend's default, set to a custom color, which is ultimately flexible, in case of complicated markers/lines/fills and would let people set to whatever they like, or could use a trace color, for the case where they have not set trace colors themselves and plotly has assigned automatically.

A couple examples of the current work (pretty much what you'd expect):

[etpinard]

currently implementing a legend.fontColorStyle attribute

That could work. But I would prefer putting these options in a trace attribute container that way it would be compatible with other legend item styling feature requests (e.g. #2080). For example,

{
  x: [/* */],
  y: [/* */],
  legenditem: {
    textfont: {
       color: 'red'
     },
     marker: {
       size: 20 // see https://github.com/plotly/plotly.js/issues/2080
     }
  }
}

---

But then again, maybe this is the wrong approach altogether. @alexcjohnson thinks that legend items should be special version of annotations.

[pewinski]

Just wanted to add one thought to the discussion. It would be nice to make it possible to change text of the labels (so it can be something different than data name), not just fonts/colors/sizes.

Maybe it's good idea to move legend options from traces to layout (?) object, something like:

{
   legendItems: [{
       text: "Single Trace Name",
       traces: [0],
       style: { /* textFont, marker, etc */ }
   }, {
       text: "Group name 1",
       traces: [1, 3, 4],
       mode: "single", // show as one label on lagend. Use first trace name if no text is supplied (?)
       style: { /* textFont, marker, etc */ }
   }, {
       text: "Group name 1",
       traces: [2, 5],
       mode: "multiple", // show as multiple labels on legend but group them visually. Use trace name for each label text
       style: { /* textFont, marker, etc */ }  
   }]
}

This would also allow us to create a 'group' of certain data items as a single item on the legend. Not just visually (like current legendgroup property on a trace), but physically displayed as one label on legend.

I think disconnecting legend settings from trace object should also make legend more flexible and easier to maintain - no need to track group names on trace object, possibility to specify ordering of elements on legend etc. How do you feel about that, @etpinard, @alexcjohnson ?

[p2ya]

Is there any solution for this ?
I have a chart as attached and I need to manually set the legend colors.
This is generated by using:

trace=[]
for colname, col in statusCountSorted[1:-1].iteritems():

trace.append(go.Bar(x=statusCountSorted.index, y=statusCountSorted[colname][0:-1],opacity=0.6,name=colname))

layout = go.Layout(
autosize=False,
width=800,
height=400,
barmode='stack',
title = 'Top '+str(topCommonCount)+' common issues from '+horizonStartDate+' to ' + endDate,
margin=go.Margin(
l=50,
r=50,
b=150,
t=50,
pad=0
))

[etpinard]

Is there any solution for this ?

Yes. See #1701 (comment)

[p2ya]

@etpinard how can I implement your suggestion into my code ? it looks like it is a bit different

[etpinard]

it looks like it is a bit different

Probably best to use https://community.plot.ly/ for questions of the likes.