R how to add change percentage in tooltip in line plot?

Question

I want to display in the tooltip the % change of the y values. However, I don't want to change the y axis to percentage as in https://www.highcharts.com/stock/demo/compare.

Answer 1

Update

There doesn't appear to be an option where you include comparison values but plot the stock value built in.

I've plotted 2 stocks in this plot. For each stock, there are two series, one that is not for comparison and one that is. The two series are linked. The comparison series is set to visible = F.

The comparison value is collected from the invisible linked series in the custom tooltip and added to the non-compare series.

library(highcharter)
library(quantmod)

# get data
goo <- getSymbols("GOOG", auto.assign = F)
app <- getSymbols("AAPL", auto.assign = F)
goog <- goo$GOOG.Open
appl <- app$AAPL.Open

highchart() %>% 
  hc_chart(zoomType = "x", marginTop = 20) %>% 
  hc_rangeSelector(enabled = T) %>% 
  hc_navigator(enabled = F) %>% 
  hc_scrollbar(enabled = F) %>% 
  hc_tooltip(
    formatter = htmlwidgets::JS(
      "function() {
          /* collect name, x (and format it), y, color, compare value, & % diff */
      nm = this.series.name;
      xform = Highcharts.dateFormat('%B %e, %Y', this.x);        /* collect/format date */
      compVal = this.series.linkedSeries[0].dataModify.compareValue; /* 1st val in view */
      col = this.color; y = this.y;                          /* set color and y to vars */
      delta = (y - compVal)/compVal * 100;   /* compute the comparison value as HC does */   
      tooltip = `<span>${xform}<br><hr><b><span style='color:${col};'>`; /* create tooltip */
      tooltip += `● ${nm}:</span></b> ${y.toFixed(2)} (${delta.toFixed(2)}%)</span>`;
      return tooltip; /* send back new tooltip */
      }")) %>% 
  hc_add_series(goog, name = "Google", id = 'g', compare = F) %>% 
  hc_add_series(appl, name = "Apple", id = 'a', compare = F) %>% 
  hc_add_series(goog, visible = F, linkedTo = 'g', compare = "percent") %>% 
  hc_add_series(appl, visible = F, linkedTo = 'a', compare = "percent") %>% 
  hc_xAxis(type = "datetime") %>%    # since it's a line, not stock, format x-axis
  hc_yAxis(opposite = F, tickAmount = 5) # add values to y

---

Originally Wrote

Your question isn't reproducible, but if you wanted a translation of JS to R for Highcharter specifically, I could do that.

The attribute compare = "percent" will create the delta values for you.

library(highcharter)
library(quantmod)

goo <- getSymbols("GOOG", auto.assign = F) # get Google stock data
app <- getSymbols("AAPL", auto.assign = F) # get Apple stock data
goo <- goo$GOOG.Adjusted # only plotting one feature
app <- app$AAPL.Adjusted


highchart(type = "stock") %>% 
  hc_add_series(goo, name = "Google", 
                compare = "percent") %>%  # compare the stock data creates % data
  hc_add_series(app, name = "Apple", 
                compare = "percent") %>% 
  hc_rangeSelector(selected  = 4) %>% 
  hc_tooltip(pointFormat = '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
             valueDecimals = 2,
             split = T)