Include shapes in legends

[jackgolding]

Would be awesome if we could add shapes to the legend

[etpinard]

Yes, it would be doable to customize legend items with svg paths.

Good suggestion, but this is not a high priority I'm afraid.

[cms26]

I would also like to see this.

[desmond206x]

This needs to be added please 👍

[ghost]

^ Seconded!

[raphael-leger]

Any update on this...?

[okomarov]

I've got a workaround with code using bars at: https://dash-ts-highlight.herokuapp.com/

[bpostlethwaite]

I just had the case to use this. Wanted to show a highlighted region in the legend so all the information related to visual elements is in one place.

[bemowr]

I also have a few cases where this would be very nice. In my most recent case, I would like to show night time hours on a histogram of occurrences by hour in a day. (1) It would help explain the plot without external elements and (2) it would be nice to toggle on and off.

[jpoles1]

I think this feature would be a great addition; very helpful for showing/hiding plot overlays!

[EricMoIr]

It's already been 5 years since this post. Is it being worked on or planned to? Would you accept pull requests that solve this?

[alexcjohnson]

To be clear about what people want here, it's the ability to add legend items corresponding to certain items in layout.shapes, right? Which would presumably allow those shapes to be toggled on or off by clicking the legend. (As opposed to inserting new custom shapes into existing legend entries, which seems to be how @etpinard interpreted this query originally)

This isn't on our roadmap, though if a company were interested in sponsoring it we'd be happy to talk https://plotly.com/consulting-and-oem/

But absolutely we'd be happy to accept and review a pull request. Before starting we should nail down the attributes to be created. I'm thinking these would be (within shapes/attributes):

• showlegend (boolean)
• legendgroup (string) - so you can toggle multiple shapes together
• visible needs to add the option 'legendonly'

If that's all we add, shapes will all show up at the bottom of the legend, unless they're put into the same legendgroup as an earlier trace. Hopefully that's OK for the first version, later we can think about some more flexible ordering options.

Anything I'm missing?

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

[cstampar]

Just came across this problem today and would love to see it as well :)

[stevenschmatz]

same here!^

[BJWiley233]

For R as well too.

[ggirelli]

Same here! <3

[patebel]

Would love to see that as well!

[jumattern]

Same, would be great!

[DradeAW]

Same, this option would be very welcome!

[petermchale]

Same.

[saurabh-ar]

I also faced the same issue today. In my Legend even the Circle is not visible. I don't know why! It's just a plain line. that's it.
Would love to see shapes with the legends.

[cientec94]

Seconded

[erikhuck]

WORKAROUND?

I needed to make a legend for my shape colors so I may have found a workaround that'll suit the needs of others. It's hacky and uses bogus trace data just to fudge the already existent functionality into doing what I want. But it works.

	let legendData = [
		{name: 'ShapeName1', color: ShapeColor1},
		{name: 'ShapeName2', color: ShapeColor2},
		...
	]

	legendData = legendData.map(({name, color}) => {
		return {
			y: [undefined],
			name,
			mode: 'markers',
			marker: {
				size: 15,
				color,
				symbol: 'square'
			}
		}
	})

...

<Plot data={legendData} layout={layout}/>

[asadow]

Me also!

[Youjin1985]

Same here, find out that I need this

[tcarbs]

@erikhuck this wouldn't allow you to toggle the shapes, correct?

[erikhuck]

@erikhuck this wouldn't allow you to toggle the shapes, correct?

Honestly, it's been so long that I don't remember. You might need to try my solution and see.