Plotly.js: textposition: "avoid overlap"

[nicolaskruchten]

Not sure if we have an open issue for this but it would be great to have more-automatic text positioning to avoid text overlapping on e.g. scatters.

[alexcjohnson]

textposition can only push until one of the corners is just touching the point, it can't push farther out (which would require adding a line or something, like we have for annotations), so you can still connect the text back to the point. Would you be comfortable with a v1 of this feature that simply starts removing some text when we can't accommodate it all touching the points, or do we need to keep pushing farther away and draw lines (and ensuring the lines don't cross each other or other text labels...)?

[jackparmer]

Looks like there is some nice prior art: https://github.com/tinker10/D3-Labeler (cc @archmoj )

Would you be comfortable with a v1 of this feature that simply starts removing some text when we can't accommodate it all touching the points

Yes! Speaking with @derek179 today, this was apparently the method Tableau uses.

[nicolaskruchten]

yeah, we'd also need like a textpriority or something to help us determine which text hides which text

[archmoj]

Our contour seems to have a similar feature. @alexcjohnson is that correct?

[jackparmer]

Might be nice if there were a modebar button in scatter plots where you could toggle these labels.

[alexcjohnson]

Our contour seems to have a similar feature.

True, contour automatically moves labels around on the contour lines in order to keep them as far apart as possible (with adjustments to bias them toward horizontal and away from the edges). Might be something we could borrow from that...

Might be nice if there were a modebar button in scatter plots where you could toggle these labels.

Or a legend feature, so you could toggle text on each trace independently.

[derek179]

team, the background here is a question was raised by a potential
technology partner on how we could build new features, such as the ability
for labels to show cleanly on outliers. It's not just this one feature but
good to see we approach the idea from multiple perspectives and can offer
usability options. thanks.

On Tue, Mar 24, 2020 at 8:19 PM alexcjohnson [e-mail]
wrote:

Our contour seems to have a similar feature.

True, contour automatically moves labels around on the contour lines in
order to keep them as far apart as possible (with adjustments to bias them
toward horizontal and away from the edges). Might be something we could
borrow from that...

Might be nice if there were a modebar button in scatter plots where you
could toggle these labels.

Or a legend feature, so you could toggle text on each trace independently.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/plotly/plotly.js/issues/4674#issuecomment-603571483,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ANP6QF5FHT2CIZEKL3ZYTI3RJFEY7ANCNFSM4LR7VBZQ
.

[emmanuelle]

It would be great also to have an equivalent of loc='best' for placing the legend, as in matplotlib. Not sure whether this belongs here or to another existing/new issue.

[nicolaskruchten]

That's definitely a new issue :)

[nicolaskruchten]

Not sure if this is what you meant, @alexj, but we could also add the notion that first, the engine tries to find a combination of textpositions that avoids overlap, by e.g. moving one left, one right, one up, etc, and then if some heuristic fails, then start hiding text. First attempt could just be one-pass greedy.

[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: $15k-$20k

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.