Problem with Interactive plot using a mouse 'click' in flexdashboard

Question

My goal is to be able to click on an interactive plot in flexdashboard and have the data points returned. I am able to perform this successfully with a static plot per the code below, but I cannot figure out how to accomplish this with an interactive plot that is resizable.

I attempted 'ggplotly(plot1)' in place of 'plot1' but that did not work, as no chart rendered. While an interactive ggplotly plot is "nice," my preference is to use hPlot (rCharts package) as the interactive chart. When attempting that, the interactive hPlot renders outside the dashboard in its own webpage which naturally does not 'talk' to the rendered dashboard in terms of returning clicked data points on the interactive plot.

Any assistance is appreciated.

    ---
    title: "Untitled"
    output: 
      flexdashboard::flex_dashboard:
        orientation: rows
        
    runtime: shiny

---
    
```{r setup, include=FALSE}


    library(shiny)
    library(tidyverse)
    library(rCharts)

Column {data-width=650}

Chart A

  

  

    plotOutput("plot1", click = "Low" )
      
      output$plot1 <- renderPlot({
    
     plot1 <- ggplot(data=mtcars, aes(x = mpg, y = cyl)) +
     geom_line( color="blue", size=0.5, alpha=0.9, linetype=1)  + 
     ggtitle("Plot")
    
     # ggplotly(plot1)
     plot1
       
      })

Chart D - hPlot

    renderPlot({
    
    
    xmin <- 1
    ymin <- 0
    ymax_low <- ceiling(max(mtcars$cyl))
    
    interactive_low <- hPlot(x = "mpg", y = "cyl", data = mtcars, type = "line",
    
                         ylim = c(ymin, ymax_low),
    
                         xlim = c(xmin, nrow(mtcars)),
    
                         xaxt="n",   # suppress x-axis labels
    
                         yaxt="n",   # suppress y-axis labels,
    
                         ann=FALSE)  # x and y axis titles
    
    interactive_low$set(height = 600)
    
    interactive_low$set(width = 700)
    
    interactive_low$plotOptions(line = list(color = "green"))
    
    interactive_low$chart(zoomType = "x")   # Highlight range of chart to zoom in
    
    interactive_low
    
    
    })

Column {data-width=350}

Render Values

# See - https://stackoverflow.com/questions/52212487/using-plot-click-in-flexdashboard

renderText({
  paste(round(as.numeric(unlist(input$Low$x)),2),"   ",round(as.numeric(unlist(input$Low$y)),2))
})

Answer 1

Here is a way. It should work with ggplotly as well.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
runtime: shiny
---
    
```{r setup, include=FALSE}
library(shiny)
library(plotly)
library(htmlwidgets)
```


Column {data-width=650}
-----------------------------------------------------------------------

### Chart A 

```{r}
dat <- iris[1:10, ]
js <- "
function(el, x) {
  el.on('plotly_click', function(d) {
    var point = d.points[0];
    Shiny.setInputValue('point', {x: point.x, y: point.y});
  });
}"
renderPlotly({
  plot_ly(dat, type = "scatter", mode = "markers",
             x = ~Sepal.Width, y = ~Sepal.Length) %>%
    onRender(js)
})
```


Column {data-width=350}
-----------------------------------------------------------------------

### Clicked point:

```{r}
renderPrint({
  req(input$point)
  cat(sprintf("x: %.3f\ny: %.3f", input$point$x, input$point$y))
})
```