CODEWITHSUNDEEP
highchartsr-highcharter
Vlad
Vlad

Reputation: 3764

R Highcharter: Highlight/unhighlight a bar in a bar chart by clicking

Is it possible to highlight a clicked bar in a highcharter bar chart? The code below captures the click event on a bar (code is sourced from answer to this question), the question is to then use this click information to highlight the clicked bar, and then unhighlight when the bar is clicked again or if another bar is clicked.

One way to highlight is to use a plotband (see here) however I'm flexible as long as the user can see their selection clearly.

library("shiny")
library("highcharter")

ui <- shinyUI(
  fluidPage(
    column(width = 8, highchartOutput("hcontainer", height = "500px")),
    column(width = 4, textOutput("text"))
  )
)

server <- function(input, output) {      

  a <- data.frame(b = LETTERS[1:10], c = 11:20, d = 21:30, e = 31:40)

  output$hcontainer <- renderHighchart({      

    canvasClickFunction <- JS("function(event) {Shiny.onInputChange('canvasClicked', [this.name, event.point.category]);}")
    legendClickFunction <- JS("function(event) {Shiny.onInputChange('legendClicked', this.name);}")

    highchart() %>% 
      hc_xAxis(categories = a$b) %>% 
      hc_add_series(name = "c", data = a$c) %>%
      hc_add_series(name = "d", data = a$d) %>% 
      hc_add_series(name = "e", data = a$e) %>%
      hc_plotOptions(series = list(stacking = FALSE, events = list(click = canvasClickFunction, legendItemClick = legendClickFunction))) %>%
      hc_chart(type = "column")

  })      

  makeReactiveBinding("outputText")

  observeEvent(input$canvasClicked, {
    outputText <<- paste0("You clicked on series ", input$canvasClicked[1], " and the bar you clicked was from category ", input$canvasClicked[2], ".") 
  })

  observeEvent(input$legendClicked, {
    outputText <<- paste0("You clicked into the legend and selected series ", input$legendClicked, ".")
  })

  output$text <- renderText({
    outputText      
  })
}

shinyApp(ui, server)

Upvotes: 0

Views: 648

Answers (1)

raf18seb
raf18seb

Reputation: 2146

You are looking for a plotOptions.column.allowPointSelect property: API - allowPointSelect

Just update line 25 in your code:

hc_plotOptions(series = list(stacking = FALSE, allowPointSelect = TRUE, events = list(click = canvasClickFunction, legendItemClick = legendClickFunction))) %>%

To select more than 1 point, hold ctrl button pressed.

Upvotes: 2

Related Questions