Add extra variables to tooltip pie chart echarts4r

Question

I am creating a doughnut chart using echarts4r. Now I am trying to add a custom tooltip and I am able to replicate the examples given here Echarts4r : Create stacked area chart with percentage from total in tooltip and here Displaying extra variables in tooltips echarts4r. However, I do not really understand how this extends to a pie chart. I would like to have a pie chart with a tooltip that shows both the total and the relative percentage

library(tidyverse)
library(echarts4r)

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

My_df %>%
  e_charts(x)  %>% 
  e_pie(n, radius = c("50%", "70%")) %>%
  e_tooltip()

This is my best shot so far

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.value[1])   }  "))

in the scatterplot examples the extra values are attached using bind = but that does not work for the pie chart.

Answer 1

Can't you use params.percent?

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)  +'%' }  "))

You could also tidy things up a bit by using Javascript template literals.

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}%`
                                        }  "))

Answer 2

That is probably even more hackier than the answer by @WeihuangWong in Displaying extra variables in tooltips echarts4r

If you just want to display the percentages then the answer by @norie the way to go. Still my answer may be useful in case one wants to display values in the tooltip which are not already computed by echarts.

1. Following that answer you could add a variable to your df which contains the name of the series and the additional values you want to show in the tooltip, which I call name for reference

2. Use name in e_charts instead of x

3. Inside e_tooltip split name into its parts and set up your tooltip

4. However, using name has the the side-effect that now both the name and the percent value show up as labels and in the legend. To get rid of this we have to add formatters for the labels and the legend, too.

library(tidyverse)
library(echarts4r)

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

My_df %>%
  e_charts(name)  %>% 
  e_pie(n, radius = c("50%", "70%"), label = list(
    formatter = htmlwidgets::JS(
    "function(params){
      var vals = params.name.split(',')
      return(vals[0])}"))
  ) %>%
  e_legend(formatter = htmlwidgets::JS(
      "function(name){
      var vals = name.split(',')
      return(vals[0])}")) %>% 
  e_tooltip(formatter = htmlwidgets::JS("
                                        function(params){
                                        var vals = params.name.split(',')
                                        
                                        return('<strong>' + vals[0] + 
                                        '</strong><br />total: ' + params.value + 
                                        '<br />percent: ' +  vals[1])   }  "))