Search code examples
javascriptrhighchartsr-highcharter

Highcharts + R: Show tooltip values in million/billion etc. automatically


Highcharter (R wrapper for displaying Highcharts plots in R) does automatically adjust axis labels depending on the values, e.g. 405 will show as 405 whereas 3'000'000 will show as 3M.

I want to reproduce this for the tooltips shown.

This article outlines how to do this in Highcharts directly. However, I am not able to reproduce this using Highcharter.

Related:

What am I missing?

chart_data <- tibble(
  date_var = c(seq(from = as.Date('2019-09-10'), to = as.Date('2019-09-15'), by = 1))
  , value = c(2304, 50000, 678900, 98457, 124684, 249547)
  )

hchart(chart_data, type = 'line', hcaes(x = date_var, y = value)) %>% 
  hc_tooltip(formatter = JS(
  "function() {
      var axis = this.series.yAxis;

      return axis.defaultLabelFormatter.call({
        axis: axis,
        value: this.y
      });
  }"
))

IMPORTANTLY: It seems to work for some values but not all of them. For instance, with above data I get correct tooltip labels for the 2nd and the 3rd date but all else show the original number.


Solution

  • In the related SO question you provided a link to, the assumption was to short numbers that have zeros (0) at the end. Just use the previous code from @Paweł Fus' answer:

    formatter: function() {
          var ret = '',
            multi,
            axis = this.series.yAxis,
            numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'],
            i = numericSymbols.length;
          while (i-- && ret === '') {
            multi = Math.pow(1000, i + 1);
            if (axis.tickInterval >= multi && numericSymbols[i] !== null) {
              ret = Highcharts.numberFormat(this.y / multi, -1) + numericSymbols[i];
            }
          }
          return ret;
        }
    

    jsFiddle: https://jsfiddle.net/BlackLabel/yrb7gzap

    Best regards!