Conditional Axis Formatting in Highcharter

Question

I am trying to produce a highcharter reactive plot in a shiny dashboard. The plot is based on product sales, which can be in different currencies. To that effect I have a dropdown list to select currencies, and based on the selected currency the plot changes. I managed to make the tooltip currency code dependent on the selection, but I cannot figure out how to apply the same reasoning to the axis values. Suppose I have the following data:

df = tibble(id = c(1:10),
       item = c(sample(c('item1','item2','item3'), 10, replace = TRUE)),
       sales = c(sample(c(500:1500), 10, replace = TRUE)),
       units = c(sample(c(1:10), 10, replace = TRUE)),
       currency = c(sample(c('GBP','EUR'), 10, replace = TRUE))
       )


df = df %>% 
  group_by(item) %>% 
  summarise(total_sales = sum(sales),
            total_units = sum(units),
            currency = currency) %>% 
  ungroup()


# A tibble: 5 × 4
  item  currency total_sales total_units
  <chr> <chr>          <int>       <int>
1 item1 EUR             1044           9
2 item1 GBP             5082          25
3 item2 EUR             1071           8
4 item2 GBP             1096           1
5 item3 EUR             2628          25

The user will select a currency, and the plot will be generated only for that currency. I would like to display the currency value in the tooltip and on the y-axis. This is my code for the plot containing the tooltip:

df %>% 
  filter(currency == 'EUR') %>% 
  mutate(colors = colorize(total_units, scales::viridis_pal(option = "viridis",
                                                           begin = 0,
                                                           direction = 1)(length(unique(total_units))))) %>%
  hchart('column', hcaes(x = item, y = total_sales,
                         color = colors)) %>% 
  hc_colorAxis(
    min=min(df$total_units),
    max=max(df$total_units ),
    stops= color_stops(colors = cols), 
    marker = NULL
  ) %>% 
  hc_tooltip(
    useHTML = TRUE,                             
    formatter = JS(
      "
      function(){
        outHTML = '<b> Product: </b>' + this.point.item + '<b><br> Sales:</b> '+ this.point.currency + ' ' + this.point.total_sales +
        '<b><br> Number of Units Sold: </b>' + this.point.total_units
        return(outHTML)
      }

      "
    ),
    shape = "square", # Options are square, circle and callout
    borderWidth = 0  # No border on the tooltip shape
  ) %>% 
  hc_yAxis(title = list(text = "Sales Amount",
                        align = "middle",
                        margin = 10,
                        style = list(
                          fontWeight = "bold",
                          fontSize = "1.4em"
                        )
  ),
  labels = list(formatter = JS(
    "function(){
             data = this.value
             return(data)
             }"
  ))
  )

If you then change the filter from 'EUR' to 'GBP' you can see that the tooltip updates automatically:

I would like the same dynamic prefix to appear on the y-axis to get this result automatically when 'GBP' is select, and vice-versa for 'EUR':

Any suggestions?

Answer 1

Inside chart.events.load it's possible to use update method to change suffix.

events: {
  load: function() {
    var chart = this,
      yAxis = chart.yAxis[0],
      lastTick = yAxis.tickPositions[yAxis.tickPositions.length - 1],
      suffix = yAxis.ticks[lastTick].label.textStr.substr(-1, 1);

    yAxis.update({
      title: {
        text: 'Revenue [' + suffix + ' €]'
      }
    })
  }
}

Demo: https://jsfiddle.net/BlackLabel/b0yucdot/1/

API: https://api.highcharts.com/class-reference/Highcharts.Axis#update