Image above a shape in plotly

user_19233319 0
Viewed 89

I want the elements of my plotly graph to be displayed in this order: grid < shape < image.

If I add layer='below' to my shape, it goes under the grid.

Minimum reproducible example:

library(plotly)

plot_ly(type = 'scatter', mode='markers') %>%
  layout(shapes = list(type = 'line', x0 = 0, x1 = 1, y0 = 0, y1 = 1),
         images = list(source = 'https://images.plot.ly/language-icons/api-home/r-logo.png?raw=true"',
                       x = 0.5, y = 0.5,
                       sizex=0.5, sizey=0.5,
                       xanchor = 'center', yanchor = "middle",
                       layer = 'above'))

enter image description here

plotly r layout shapes image
1 Answers

The only way I can think to make this work is to use htmlwidgets.

plot_ly(type = 'scatter', mode='markers') %>%
  layout(shapes = list(type = 'line', x0 = 0, x1 = 1, y0 = 0, y1 = 1),
         images = list(source = 'https://images.plot.ly/language-icons/api-home/r-logo.png?raw=true',
                       x = 0.5, y = 0.5,
                       sizex=0.5, sizey=0.5,
                       xref = "x", yref = "y",
                       xanchor = 'center', yanchor = "middle")) %>%
  htmlwidgets::onRender("function(el){
                        m = document.querySelector('g.layer-above');
                        m.appendChild(m.firstElementChild);
                        }")

enter image description here

user_53290730
Related