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

Question

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)

score 2 · Accepted Answer · answered Jan 21 '19 at 12:27

2

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.

answered Jan 21 '19 at 12:27

raf18seb

2,096
1
7
19

This works a treat. Is there also a way to have an equivalent `allowCategorySelect` when the columns are stacked so it could selected all the points in a stacked column? – Vlad Jan 21 '19 at 20:18
1

It can be easily done with pure JS using point.select() method: https://api.highcharts.com/class-reference/Highcharts.Point#select (looping through all points in the stack) but I am a beginner with R and I am not sure how to implement this in R. I can try tommorow – raf18seb Jan 21 '19 at 21:41
I'm guessing it can be done by using the id of the highchart to manipulate it after creation, however I haven't found any examples of this for highcharts in R. – Vlad Jan 22 '19 at 04:31
I've now asked this question here: https://stackoverflow.com/questions/54301374/r-highcharter-manipulate-a-highchart-after-creation – Vlad Jan 22 '19 at 04:40
1

Done ;) easier than I thought :D You will find the answer in the new topic you have created (link above). – raf18seb Jan 22 '19 at 13:09

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

1 Answers1