Hi @Rankineplant. This feature is tricky. You have to define the circle objects and overlay on the plot and enable the edition and report the position. So, you can get the coordination of the edited circle by event_data. The report coordination is a named list. Observe the change of coordination and update the grey dots. And also update the coordination of the overlay circle objects. I also fixed the axes ranges, so you can see the plot difference after moving the circles.
library(shiny)
library(dplyr)
library(plotly)
library(purrr)
library(tidyverse)
ui <- fluidPage("Draggable Graph",
plotlyOutput("Draggable_Graph")
)
server <- function(input, output, session) {
circle1 <- reactiveValues(x = 2010, y = 5)
circle2 <- reactiveValues(x = 2050, y = 50)
#All the points in between
observe(
{
ed <- event_data("plotly_relayout")
req(ed)
isolate(
{
if (grepl("shapes\\[0\\]", names(ed)[1])) {
circle1$x <- ed[[1]]
circle1$y <- ed[[2]]
}
if (grepl("shapes\\[1\\]", names(ed)[1])) {
circle2$x <- ed[[1]]
circle2$y <- ed[[2]]
}
}
)
}
)
#Create plot
output$Draggable_Graph <- renderPlotly(
{
circles <- map(
list(circle1, circle2),
~{
list(
type = "circle",
xanchor = floor(.x$x),
yanchor = .x$y,
x0 = -5,
y0 = -5,
x1 = 5,
y1 = 5,
xsizemode = "pixel",
ysizemode = "pixel",
# other visual properties
fillcolor = "red",
line = list(color = "transparent"),
layer = "below"
)
}
)
X <- seq.int(floor(circle1$x), floor(circle2$x))
FillinYs <- seq(from = circle1$y, to = circle2$y, length.out = length(X))
plot_ly() %>%
add_markers(x = X, y = FillinYs, opacity = 0.3) %>%
layout(shapes = circles, xaxis = list(range = c(2005, 2055)), yaxis = list(range = c(0, 55))) %>%
config(edits = list(shapePosition = TRUE))
})
}
shinyApp(ui, server)