textposition: "avoid overlap"

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.

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...)?

@archmoj

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.

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

@alexcjohnson

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

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

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.

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 ***@***.***> 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 <#4674 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANP6QF5FHT2CIZEKL3ZYTI3RJFEY7ANCNFSM4LR7VBZQ> .

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.

That's definitely a new issue :)

@alexj

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.

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.

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.

FWIW, I'd love to see this feature take inspiration from the R package {ggrepel}, not only since it'd make it feasible to support automatic conversions via ggplotly(), but also because the API and approach seem very well done

I'd say this is an important feature that other modern libraries already handle

Does anyone have a good example showing this problem? I'm interested in all charts, though I imagine that this is most apparent on scatter plots.

Tableau handles this well. Tableau visualization with labels "intelligently" visible:

Plotly figure:

Another example:

Any updates on this?

docs: add mtcars vignette tutorial

Hi everyone, we had this problem in our webapp for a long time. Thus, we recently coded up a solution:

https://github.com/bigomics/plotly.repel

Please, go and test it (still very early release, might have some rough edges). Please, let us know if you encounter any issue and open it in the repo!

@cpsievert

cc @cpsievert: you mentioned ggrepel back in 2021; this is exactly that, implemented as an R wrapper over plotly.js. @nicolaskruchten @jackparmer @alexcjohnson: in case this is useful or could inform a native implementation.
@DustinCai @camdecoster: this directly addresses what you were asking for.

Thanks for letting us know! We've got a big backlog of work, so I'm not sure when this will get prioritized. If someone wants to take a crack at it, we can provide support and prioritize a review. Someone else just mentioned this as an issue today, so here's another example of why this is needed (taken from a Codepen):

  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
  <div id="chart" style="width:700px;height:500px;"></div>

  <script>
    // Sample data — mean and median land close together so labels overlap
    const data = [];
    for (let i = 0; i < 500; i++) {
      data.push(Math.random() * 10 + Math.random() * 10);
    }

    const mean = data.reduce((a, b) => a + b, 0) / data.length;
    const sorted = [...data].sort((a, b) => a - b);
    const median = sorted[Math.floor(sorted.length / 2)];

    const trace = {
      x: data,
      type: 'histogram',
      nbinsx: 30,
      marker: { color: 'steelblue' }
    };

    const layout = {
      title: 'Histogram with Overlapping Mean & Median Annotations',
      xaxis: { title: 'Value' },
      yaxis: { title: 'Frequency' },
      shapes: [
        { type: 'line', x0: mean, x1: mean, y0: 0, y1: 1, yref: 'paper',
          line: { color: 'red', width: 2, dash: 'dash' } },
        { type: 'line', x0: median, x1: median, y0: 0, y1: 1, yref: 'paper',
          line: { color: 'green', width: 2, dash: 'dot' } }
      ],
      annotations: [
        { x: mean, y: 1, yref: 'paper',
          text: 'Mean: ' + mean.toFixed(2),
          showarrow: true, arrowhead: 2, ax: 0, ay: -20,
          font: { color: 'red', size: 14 },
          bgcolor: 'rgba(255,255,255,0.7)' },
        { x: median, y: 1, yref: 'paper',
          text: 'Median: ' + median.toFixed(2),
          showarrow: true, arrowhead: 2, ax: 0, ay: -20,
          font: { color: 'green', size: 14 },
          bgcolor: 'rgba(255,255,255,0.7)' }
      ]
    };

    Plotly.newPlot('chart', [trace], layout);
  </script>

Hello all - I have a PR up for this feature in #8065. Please take it for a spin and let me know what you think! And thanks for all of the discussion above

Navigation Menu

Repository navigation

textposition: "avoid overlap" #4674

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

textposition: "avoid overlap" #4674

Description

Activity

alexcjohnson commented on Mar 23, 2020

jackparmer commented on Mar 24, 2020

nicolaskruchten commented on Mar 24, 2020

archmoj commented on Mar 24, 2020

jackparmer commented on Mar 24, 2020

alexcjohnson commented on Mar 25, 2020

derek179 commented on Mar 25, 2020

emmanuelle commented on Apr 7, 2020

nicolaskruchten commented on Apr 7, 2020

nicolaskruchten commented on Apr 22, 2020

jackparmer commented on Sep 10, 2020

cpsievert commented on Nov 2, 2021

9 remaining items

Ferreira-B commented on Nov 7, 2024

camdecoster commented on Feb 13, 2025

cameronboroumand commented on Dec 11, 2025

volmart commented on Feb 25, 2026

DustinCai commented on Feb 28, 2026

phisanti commented on Mar 2, 2026

phisanti commented on Mar 2, 2026

camdecoster commented on May 14, 2026

chriddyp commented on Sep 22, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions