How to create e_bar chart with both total and percentage in tooltip?

Question

In echarts4r, I am creating a tooltip that is to display both total and percentage. It works in pie or donut charts, but not in bar charts, which show undefined%. I have tried totals += params.value[1]; perc = params.value[1] / totals; in the bar chart JS function. But it does not work.

library(tidyverse)
library(echarts4r)

My_df <- data.frame(n = c(2, 4, 10), 
                    x = c("A", "B", " C")) %>%
     mutate(percent = round(n/sum(n), 2) )

1. Donut chart:

My_df %>%
  e_charts(x)  %>% 
  e_pie(n, radius = c("50%", "70%")) %>%
  e_tooltip(formatter = htmlwidgets::JS("
                                        function(params){
                                        return('<strong>' + params.name + 
                                        '</strong><br/>total: ' + params.value + 
                                        '<br />percent: ' +  params.percent)  +'%' }  "))

2. Bar chart:

My_df %>%
  e_charts(x)  %>% 
  e_bar(n) %>%
  e_tooltip(formatter = htmlwidgets::JS("
                                        function(params){
                                        return('<strong>' + params.name + 
                                        '</strong><br/>total: ' + params.value[1] + 
                                        '<br/>percent: ' +  params.percent)  +'%' }  "))

Answer 1

The difference is that for e_pie the percentage value is computed by echarts under the hood and added as an attribute to the params object (Put differently: There is no need to compute the percentage value manually for a pie chart and actually the percent column of your data is not used). But this is not the case for e_bar. Hence, params.percent is undefined as there is not attribute with name percent.

However, one possible hack would be to pass the percent value via the bind parameter which is then stored in the name attribute, whereas the category value mapped on x can be retrieved from the value array, i.e. value[0]:

library(echarts4r)

My_df |> 
  e_charts(x) |> 
  e_bar(n, bind = percent) |> 
  e_tooltip(
    formatter = htmlwidgets::JS("
      function(params) {
        return('<strong>' + params.value[0] +
        '</strong><br/>total: ' + params.value[1] +
        '<br/>percent: ' +  100 * params.name)  +'%' 
      }")
  )

Answer 2

I think you can also try using e_add_nested. Here you can pass additional variables in your data other than the ones already being mapped.

library(tidyverse)
library(echarts4r)

My_df %>%
  e_charts(x)  %>% 
  e_bar(n) %>%
  e_add_nested('extra', percent) %>%
  e_tooltip(formatter = htmlwidgets::JS("
              function(params) {
                return('<strong>' + params.name + 
                '</strong><br/>total: ' + params.value[1] + 
                '<br/>percent: ' +  params.data.extra.percent)  +'%' 
              }
            "))