Let’s check some examples!

Hello Word with highcharter


This small Shiny application show how to integrate highcharter in Shiny web appliaction.

The main function are highchartOutput and renderHighchart and work the same way like other widgets like DT, Plotly o recharts4r.

Proxy functions


Proxy functions allow you modify the highcharter widget without redraw the entire chart.

The functions implemented are:

  • hcpxy_add_series To add a new series to an existing highcharter widget.
  • hcpxy_remove_series Remove specific series of a highcharter widget.
  • hcpxy_update Change general chart options of a widget.
  • hcpxy_update_series Change series options of a widget.
  • hcpxy_add_point To add a specific point from a specific series.
  • hcpxy_remove_point To remove a specific point from a specific series.
  • hcpxy_loading To enable or disable the the loading icon over the widget.

To use this function you need a widget in your ui, let’s say:

ui <- fluidPage(
  ...,
  highchartOutput("widget"),
  ...
  )

If you need to modify the widget associated to highchartOutput("widget") you need to create a proxy object indicating the id, in this case "widget". It’s important to use the argument session to define the server.

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

  # some where in you server, probably in a observeEvent
  
  observeEvent(input$idbutton, { 
  
    highchartProxy("widget") %>%
      # modify options
      hcpxy_update(
        title = list(text = "A new title"),
        chart = list(inverted = FALSE, polar = FALSE),
        xAxis = list(gridLineWidth =  1),
        yAxis = list(endOnTick = FALSE),
        chart = list(inverted = FALSE, polar = TRUE)
      ) %>% 
      # add data
      hc_add_series(df, "line", hcaes(x, y), id = "ts", name = "A real time value")
  })     
 
}

Don’t forget to check the code example.

Shiny Events Demo


Using hc_add_event_point and hc_add_event_series it is possible extract click and mouse over events from a Highchart within a Shiny app. To extract this information from the chart, input$ variables are created as follows:

paste0("highchart_output", "_", "eventType")

In the example app below, there are two variables added to the input$ object:

  • input$plot_hc_click
  • input$plot_hc_mouseOver

Events functions helpers


Highcharter have some helpers function to know what point is selected by the user.

For example, let’s say you have some app with a renderHighcharter("chart") in the ui. To know what point is selected you need to use hc_add_event_point and specify the event "click" or "mouseOver". Then is possible check the value using input$chart_click or input$chart_mouseOver depending the type of event selected in hc_add_event_point.

Highcharter widgets in valueBoxes


This is an example showing how highcharter widgets can be put inside in a valueBoxes from the packages shinydashboard or bs4dash. You can see more details in https://jkunst.com/blog/posts/2020-06-26-valuebox-and-sparklines/.

ARMA model simulation


This is a good example how shiny with highcharter can be used in a learning enviorment. The app show how a time series model is generated point by point given the parameters.

Improving a map performance


This app show how use the highcharts map collections in an efficient way. This is preloading the map using the highchart predefined maps. For example this example uses a high resolution map which is loaded one time. To do this you need use the tags$script(stc = link_to_map) in your user interface definition.

tags$script(src = "https://code.highcharts.com/mapdata/custom/world-robinson-highres.js")

Then, in your server:

mapdata <- JS("Highcharts.maps['custom/world-robinson-highres']")

highchart(type = "map") %>% 
  hc_add_series(mapData = mapdata, data = data, joinBy = c("hc-key"))

You can see other predefined maps in https://code.highcharts.com/mapdata/.

NYTimes temperature app


This app show the flexibility of higcharts and highcharter. This application is inspired ~almost copied~ from NYTimes: How Much Warmer Was Your City in 2015?. For weather radials, inspiration comes from weather-radials.com.

Piramid Census


This apps show how you can use the highcharter widgets like inputs elements. For example, clicking in a point, line, country triggers an event, a change in an input. The app uses idbr package by Kyle Walke.

The key parts to get this feature are:

  1. Define a Javascript function to use the Shiny.onInputChange, the parameter for this functions are the name of te input to listen in the server and the value of this input. In this example the name of the input is hcworldinput and this.name. This last argument is a special value in highcharter to get the name of the series or point.

  2. Use the previous function in a highcharter widget in the event that it’s required, for example, hover, click, etc.

  3. Then use input$hcworldinput in the server side of the app.

fn <- "function(){
    console.log(this.name);
    Shiny.onInputChange('hcworldinput', this.name)
  }"

hc %>% 
  hc_plotOptions(
    series = list(
      cursor = "pointer", 
      point = list(
        events = list(click = JS(fn)
        )
      )
    )
  )