R plotly hover label text alignment

Question

I'm adding custom hover text for scatterplot points in a plotly graph in R. It appears to be aligning the text left, center, or right depending on whether the text box is shown to the right, center, or the left of the plot points, respectively. I'd prefer if the text was always aligned left regardless of the positioning of the box. I've been able to style the font, e.g. setting the color and size, but haven't been able to change the text alignment.

Here's an MRE. I've removed the legend so the points on the far right are forced to have their hover boxes appear to the left of the point.

plot_ly(iris,
        x = ~Sepal.Length,
        y = ~Sepal.Width,
        type = 'scatter',
        mode = 'markers',
        hoverinfo = 'text',
        hoverlabel = list(font = list(color = 'white')),
        text = ~paste0('Some rather long text',
                       '\nSepal.Length: ', Sepal.Length,
                       '\nSepal.Width: ', Sepal.Width)) %>%
  layout(showlegend = FALSE)

I think I've narrowed this down to how the hover text SVG is built by plotly, here: https://github.com/plotly/plotly.js/blob/master/src/lib/svg_text_utils.js#L123 I can use CSS to force `text-anchor: start` on the class `.nums`, but then the pre-computed x position is not correct. — Brian Stamper, Apr 26 '18 at 15:25
Found an issue report on this here: https://github.com/plotly/plotly.js/issues/260 — Brian Stamper, Apr 26 '18 at 15:29
The issue I linked to has been fixed and closed, so you may have a more up-to-date version where this is no longer an issue. — Brian Stamper, Sep 13 '19 at 15:09

score 6 · Accepted Answer · edited Jan 31 '23 at 11:11

6

This is now controllable via the layout.hoverlabel.align attribute: https://plot.ly/r/reference/#layout-hoverlabel-align

For example:

ggplotly(p1) %>% layout(hoverlabel = list(align = "left"))

edited Jan 31 '23 at 11:11

nico

50,859
17
87
112

answered Sep 23 '19 at 01:19

nicolaskruchten

26,384
8
83
101

1

can you please show an example of how to implement this attribute? – DanWaters Jul 30 '20 at 14:59
2

ggplotly(p1) %>% layout(hoverlabel = list(align = "left")) – djc55 Jun 14 '21 at 15:26
Annoyingly, this can only be aligned left or right, but not center... – nico Jan 31 '23 at 11:11

R plotly hover label text alignment

1 Answers1

Linked