Search code examples
rshinyr-highcharter

R Highcharter zoom selected area


Is it possible to store coordinates of the zoomed area in highcharter with shiny app?

I would like something similar to this example's:

function getSelection(event) {
    alert(event.xAxis[0].min);
    alert(event.xAxis[0].max);
} 

but instead of alert, just to store them and use them.

The sample shiny app:

library(shiny)
library(dplyr)
library(highcharter)
library(tidyr)

df_plot <- cbind(
  seq(0, 1, by = 0.1),
  sample(seq(from = 100, to = 300, by = 10), size = 11, replace = TRUE),
  sample(seq(from = 1, to = 100, by = 9), size = 11, replace = TRUE),
  sample(seq(from = 50, to = 60, by = 2), size = 11, replace = TRUE),
  sample(seq(from = 100, to = 130, by = 1), size = 1, replace = TRUE)
) %>% as.data.frame()

names(df_plot) <- c("x", "a", "b", "c", "d")


ui <- fluidPage(
  column(
    width = 3,
    selectInput("select", "Select var:", choices = c("a", "b", "x", "y"), selected = c("a", "b", "x"), multiple = TRUE)
  ),
  column(
    width = 9
  ),
  column(
    width = 12,
    highchartOutput("plot")
  )
)

server <-  function(input, output){

  output$plot <- renderHighchart({
    highchart() %>%
      hc_xAxis(categories = df_plot$x) %>%
      hc_add_series(data = df_plot$a) %>%
      hc_add_series(data = df_plot$b, yAxis = 1) %>%
      hc_yAxis_multiples(
        list(lineWidth = 3, lineColor='#7cb5ec', title=list(text="First y-axis")),
        list(lineWidth = 3, lineColor="#434348", title=list(text="Second y-axis"))) %>%
      hc_chart(
        zoomType = "x"
      )
  })
}

shinyApp(ui, server)

Solution

  • You can do somethig like this:

    library(shiny)
    library(highcharter)
    
    
    ui <- fluidPage(
      column(8,highchartOutput("hcout")),
      column(4,textOutput("eventout"))
      )
    
    server <- function(input, output) {
    
       output$hcout <- renderHighchart({
    
         highcharts_demo() %>% 
           hc_chart(
             zoomType = "xy",
             events = list(
               selection = JS("function(event) {
                            Shiny.onInputChange('event', [event.xAxis[0].min,     event.xAxis[0].max]);
                              return true;
                              } ")
             )
           ) 
    
       })
    
       output$eventout <- renderText({ 
    
         input$event
         })
    
    }
    

    But I don't know why the reset zoom button don't work (as same the jsfiddle example when you enable the resetZoomButton)