HTML Export - Background color problem

Hi there,
I’ve noticed a strange issue between a webapp export and a html export,

In the web app :

in my html export

the drawing part in my code is written as :

p <- plot_ly(x = ~distanceSequence[,1], y = ~distanceSequence[,2], name = ‘Distance’, type = ‘scatter’, mode = ‘lines’, line = list(color = ‘#black’, width = 1)) %>%

  add_trace(y = ~rotationSequence[,2], name = 'Rotation', type = 'scatter', mode = 'lines', line = list(color = '#66000088', width = 1)) %>%
  
  add_trace(y = ~heartTable[,2], name = 'HeartBeat', type = 'scatter', mode = 'lines', line = list(color = 'blue', width = 1)) %>%

  add_trace(y = ~skinvoltTable[,2], name = 'SkinVolt', type = 'scatter', mode = 'lines', line = list(color = 'yellow', width = 1)) %>% 

  add_trace(y = ~proxemyTable[,2], name = 'Proxemy', type = 'scatter', mode = 'lines', line = list(color = 'orange', width = 1)) %>% 

  layout(title = paste('Complete Graph for ',name,sep=""),
       xaxis = list(title = 'Time'),
       yaxis = list (title = 'Distance'),
       shapes = plotlyShapes)

where plotlyShapes are rectangles drawn with

list(
list(type = “rect”,
fillcolor = c1, line = list(color = c1), opacity = 0.3,
x0 = t1i, x1 = t1o, xref = “x”,
y0 = ylim[1], y1 = ylim[2], yref = “y”),
list(type = “rect”,
fillcolor = c2, line = list(color = c2), opacity = 0.3,
x0 = t2i, x1 = t2o, xref = “x”,
y0 = ylim[1], y1 = ylim[2], yref = “y”),
list(type = “rect”,
fillcolor = c3, line = list(color = c3), opacity = 0.3,
x0 = t3i, x1 = t3o, xref = “x”,
y0 = ylim[1], y1 = ylim[2], yref = “y”))

and export with : htmlwidgets::saveWidget(p, filename)

could this be an overlay problem ? i use the background shapes to group a particular amount of time, is there another way to do that ? Thanks in advance

Loup

Ok, found out that the transparent effect was causing the issue, i had my colors defined as c1=‘FF000044’ but ‘FF0000’ works fine.
For those who are in the same case :
http://reeddesign.co.uk/test/namedcolors.html
http://garyfeng.github.io/2016/06/plot-ly-transparent-image-background-my-hacks.html

1 Like