dreamRs / apexcharter

:bar_chart: R Htmlwidget for ApexCharts.js
https://dreamrs.github.io/apexcharter
Other
138 stars 15 forks source link

[feature request] set_input_hover for capturing mouseover events #47

Open bklingen opened 3 years ago

bklingen commented 3 years ago

Hi, the function set_input_click captures click events. I see that apexcharts.js also allows mouse-over events (called mouseMove). Can this be implemented in the apexcharter package, so that one can e.g., retrieve the x- and y-coordinates when hovering over a point in a scatterplot?

Many thanks!

Bernhard

pvictor commented 3 years ago

Hello,

I have to see how this event works with different types of charts before eventually integrate it like click event. Here's an example on how to use it currently:

library(shiny)
library(apexcharter)

ui <- fluidPage(
  tags$h3("Hover points information"),
  fluidRow(
    column(
      width = 6,
      apexchartOutput("chart")
    ),
    column(
      width = 6,
      verbatimTextOutput("res")
    )
  )
)

server <- function(input, output, session) {

  output$chart <- renderApexchart({
    apex(mtcars, aes(disp, qsec), type = "scatter") %>% 
      ax_chart(
        events = list(
          mouseMove = JS(
            "function(event, chartContext, config) {",
            "Shiny.setInputValue('myid', config.dataPointIndex);",
            "}"
          )
        )
      )
  })

  output$res <- renderPrint({
    req(input$myid)
    index <- input$myid + 1
    if (index > 0) {
      mtcars[index, ]
    }
  })

}

shinyApp(ui, server)

The value returned is the index of the data (starting from 0 in JavaScript), returning -1 if no point hovered. This works here because there's only one serie of data, if several, you'll have to use seriesIndex too.

VIctor