plotly.js Add shapes to legend

Would be awesome if we could add shapes to the legend

Dec 10 '15 05:12 jackgolding

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

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

Dec 30 '15 03:12 etpinard

I would also like to see this.

Aug 03 '17 12:08 cms26

This needs to be added please 👍

Oct 04 '18 11:10 desmond206x

^ Seconded!

Oct 25 '18 18:10 jeffreyhu555

Any update on this...?

Jun 05 '19 16:06 raphael-leger

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

Jan 16 '20 17:01 okomarov

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.

Feb 20 '20 16:02 bpostlethwaite

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.

Mar 25 '20 19:03 bemowr

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

Mar 29 '20 04:03 jpoles1

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?

May 15 '20 12:05 EricMoIr

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?

May 15 '20 14:05 alexcjohnson

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.

Sep 10 '20 19:09 jackparmer

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

Oct 07 '20 23:10 cstampar

same here!^

Oct 09 '20 00:10 stevenschmatz

For R as well too.

Nov 26 '20 03:11 BJWiley233

Same here! <3

Dec 02 '20 15:12 ggirelli

Would love to see that as well!

Dec 17 '20 13:12 patebel

Same, would be great!

Mar 22 '21 16:03 jumattern

Same, this option would be very welcome!

Aug 03 '21 09:08 DradeAW

Same.

Nov 04 '21 22:11 petermchale

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.

Nov 11 '21 12:11 saurabh-ar

Seconded

Mar 04 '22 11:03 cientec94

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}/>