Conditional Axis Formatting in Highcharter - html

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