Using the bind argument with e_pie

[nschwamm]

I was trying to replicate the bind argument to add an additional field to a pie chart, but the bind argument does not appear to work with e_pie. Relying on https://github.com/JohnCoene/echarts4r/issues/11 for guidance (and confirmed it worked with e_scatter), it tells me that the variable I attempted to bind is not found. A simple example is provided:

mtcars %>%  
  tibble::rownames_to_column("model") %>%
  group_by(gear) %>%
  summarise(Count = n(),
         Average_mpg=mean(mpg)) %>%
  e_charts(gear) %>% 
  e_pie(Count,name="Gear",bind=Average_mpg) %>%
  e_tooltip(formatter = htmlwidgets::JS("
                                        function(params){
                                        return('<strong>' + params.name + 
                                        '</strong><br /> ' + params.value)   }  ")) 

** Note that I used params.value instead of params.value[1], etc... because absent the bind variable, or whenever there is only 1 variable, it appears params.value[n] evaluates to undefined and params.value will be the only function that evaluates if there is only 1 value. This part does not seem to be a bug, but if you get the bind argument to work, would need to be edited in the sample code.

[nschwamm]

@JohnCoene any help here? Essentially anyway to customize the tooltip for pie charts? Thanks!

[etiennebacher]

Your code works if you put quotation marks with Average_mpg but I don't know why this is not the case in #11. Also, you put two ' on two separate lines whereas they should be on the same. By the way you can add <br/> to break the line in the tooltip.

mtcars %>%
  tibble::rownames_to_column("model") %>%
  group_by(gear) %>%
  summarise(Count = n(),
            Average_mpg = mean(mpg)) %>%
  e_charts(gear) %>%
  e_pie(Count, name="Gear", bind = "Average_mpg") %>%
  e_tooltip(formatter = htmlwidgets::JS("
    function(params){
    return('' + params.name + '<br/>' + params.value) } "))

[nschwamm]

Thanks for the feedback @etiennebacher, but I don't actually think this is the behavior that I was looking for. The tooltip that is being generated has params.name == gear and params.value == Count, average_mpg is still excluded from the visualization.

[swsoyee]

@nschwamm I have checked the source code, and it seems that it's not able to set the tooltip, and the name argument need a fix (maybe). ~~The reason it's quite similar to #203 (not sure).~~

But you are also able to use a hack to complete this task by some JavaScript callback function ~~(black magic)~~.

library(dplyr)
library(echarts4r)

data <- mtcars %>%
  tibble::rownames_to_column("model") %>%
  group_by(gear) %>%
  summarise(
    Count = n(),
    Average_mpg = mean(mpg)
  )

# Because you are only able to use the name for tooltip,
# so, just combine the `average_mpg` with `gear`, and split them
# by using callback function in rendering.
data$label <- paste(data$gear, data$Average_mpg, sep = "@")

data %>%
  e_charts(label) %>%
  e_pie(Count, name = "Average_mpg", label = list(formatter = htmlwidgets::JS("
    function(params) {
      return(params.name.split('@')[0]);
    }"))) %>%
  e_legend(formatter = htmlwidgets::JS("
    function(params) {
      return(params.split('@')[0]);
    }")) %>%
  e_tooltip(formatter = htmlwidgets::JS("
    function(params) {
      const label = params.name.split('@');
      return(`Gear:${label[0]}<br/>Average_mpg:${label[1]}`);
    }"))

[helgasoft]

@nschwamm - if you are after Average_mpg, why use Count ? If you use e_pie(Count), the pie slices will represent Count values, not Average_mpg values.     Here is the code without Count:

library(dplyr)
library(echarts4r)
mtcars %>% group_by(gear) %>%
    summarise(Average_mpg = round(mean(mpg),2), .groups='drop') %>%
    e_charts(gear) %>%
    e_pie(Average_mpg) %>% e_tooltip() %>%
    e_title('Average MPG by gear')

[nschwamm]

@helgasoft this was purely to show off the problem. My most common use case would be doing something like showing a count and a percentage, so within the tooltip you would see maybe count and percentage (defined as percent = n/sum(n, na.rm=T))

[helgasoft]

Ok, if more than two values are needed, then you'll have to follow @swsoyee example and "hide" them in a compound data column.

fmt <- function(s) { htmlwidgets::JS(paste("function(params) { ",s," }")) }
mtcars %>% group_by(gear) %>% 
  summarise(count=n(),.groups='drop') %>% 
  mutate(lbl=paste0(gear,'@',count,'@',round(count/sum(count)*100,2))) %>%
  e_charts(lbl) %>%
  e_pie(count, label=list(formatter=fmt("return(params.name.split('@')[0]);"))) %>% 
  e_legend(formatter=fmt("return(params.split('@')[0]);")) %>%
  e_title('Cars count by gear', textStyle=list(fontSize=10)) %>%
  e_tooltip(formatter=fmt("const parts = params.name.split('@');
      return(`Gears: ${parts[0]}<br/>Cnt: ${parts[1]}<br/>Pct: ${parts[2]}%`);"))

[helgasoft]

Here is another, simpler form, especially for percentages, based on different type of formatting.

mtcars %>% group_by(gear) %>% 
  summarise(count=n(), .groups='drop') %>% 
  e_charts(gear) %>%
  e_pie(count) %>% 
  e_title('Cars count by gear', textStyle=list(fontSize=10)) %>%
  e_list(list(tooltip=list(formatter='{a} <br/>{b} : {c} ({d}%)')), append=TRUE)

[nschwamm]

Thanks for the help @helgasoft ! For future posterity, the full list of what those data values mean ({a}, {b}, etc...) depends on the type for visualization. From the documentation:

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be refered as {a0}, {a1}, or {a2}.
{a}, {b}, {c}, {d} have different meanings for different series types:
Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;
Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;
Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;
Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.