Add HTML element with CSS to plotly line chart in R

Question

How can I add a vertical y-axis scroll bar in a plotly line chart?

    library(plotly)
    
    x <- c(1:100)
    random_y <- rnorm(100, mean = 0)
    data <- data.frame(x, random_y)
    
    p <- plot_ly(data, x = ~x, y = ~random_y, type = 'scatter', mode = 'lines')

    p

I have a html code for scroll bar but i don't know how to integrate that code with plot

   Html <div style="overflow-y:scroll;height: 200px;">

i have tried but for y axis i didnt find any documentation to add a scroll bar in R @Hamzah — Jerry Vfc, Oct 06 '22 at 09:36
See this example between python and Dash https://stackoverflow.com/questions/63286541/how-to-create-a-vertical-scroll-bar-with-plotly You can do it between R and Shiny — Hamzah, Oct 06 '22 at 10:22
Also see this if it can help https://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/yaxis/inverted-bar-scrollbar/ — Hamzah, Oct 06 '22 at 10:24
p%>%layout(xaxis = list(rangeslider = list())) using this code i can add slide in x axis i have tried same for y axis its not working — Jerry Vfc, Oct 06 '22 at 10:30
Rangeslider is dedicated only for x-axis as written in the documentation — Hamzah, Oct 06 '22 at 10:37

score 3 · Accepted Answer · answered Oct 10 '22 at 03:24

Use the library htmltools. You can use HTML exactly as you've written it.

library(plotly)
library(htmltools)

x <- c(1:100)
random_y <- rnorm(100, mean = 0)
data <- data.frame(x, random_y)

p <- plot_ly(data, x = ~x, y = ~random_y, type = 'scatter', mode = 'lines')

p

# this combines the plot and your y scroll
browsable(div(style = "overflow-y: scroll; height: 200px;", p))

Add HTML element with CSS to plotly line chart in R

1 Answers1