Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Custom HTML for legend, is it possible?

Currently, I can only customize colors, position and per-item text in legend:

Is there a way to have a better control of how the legend looks like? For instance, sometimes there is too much information going in a legend and formatting it as text does not look nice.

Instead, I’d like to use basic table HTML:

I realize I can make it an outside-graph HTML and style it whatever I need, but in that case I won’t be able to include the legend in the export feature which is supported by Plotly.js out of the box.

Any ideas / thoughts? Please advise how to best tackle this.

Only the legend item text (via the trace name attribute) is customizable at the moment in native plotly.js legends.

You could also build your legend using plotly.js annotations and shapes.

I built a simplistic custom legend by turning the plotly legend off, storing references to the plotly traces in my own legend objects, and then building a custom HTML legend based on the trace data.

I call plotly.relayout() after modifying the ‘visible’ attribute of the legend object associated with whatever element was clicked in my HTML legend. Seems to work pretty well and wasn’t too much work!

Would you consider submitting a merge request instead that adds this functionality to the library instead?

Sorry I missed the main thrust of your request completely.
Yes I agree it would be great to have the capability to customize the legends within the library. Maybe a template system.