Echarts4r: Add extra variable to the tooltip for a stacked bar chart when using focus="series"

Question

Please, I need help! I am stuck with the tooltip. I want to add an extra variable beside the value showed in the tooltip but I don't know how to do it. The thing is that I want to use "emphasis = list(focus = "series")" in order to focus on the value and percentage for a certain color segment in a column.

this is the example:

dt <- data.frame(zipcode =as.factor(1:3),
                 cat_a = c(1711, 1116, 1215),
                 cat_b = c(276, 1447, 1227),
                 cat_c = c(893, 794, 536),
                 percent_a = c(42.3, 27.6, 30.1),
                 percent_b = c(9.4, 49.1, 41.6),
                 percent_c = c(40.2, 35.7, 24.1),
                 total_abc= c(2880, 3357, 2978))

dt |> 
  mutate(model = paste(zipcode, cat_a, cat_b, cat_c, percent_a,
                       percent_b, percent_c, total_abc, sep = ",")) |>
  e_charts(zipcode) |> 
  e_bar(cat_a, stack = "st", name="cat_a", y_index = 0,legend=TRUE, emphasis = 
  list(focus = "series")) |> 
  e_bar(cat_b, stack = "st", name="cat_b", y_index = 0,legend=TRUE, emphasis = 
  list(focus = "series")) |> 
  e_bar(cat_c, stack = "st", name="cat_c", y_index = 0,legend=TRUE, emphasis = 
  list(focus = "series")) |>
  e_title("Count by ZIP Code") |>
  e_x_axis(nameLocation= "middle", nameGap=25) |>
  e_axis_labels(x = "ZIP Codes", y="count") |>
  e_legend(bottom = 0, 
           selected = list('cat_a' = TRUE, 
                           'cat_b' = TRUE,
                           'cat_c' = TRUE)) |> 
  e_tooltip(trigger="item",
            textStyle=list(fontFamily="arial", fontSize=12)) |>
  e_animation(duration=2000)

I tried to use bind into each e_bar and "function params" to add the percentage (percent_a, percent_b, percent_c) but it didn't work. I could use trigger="axis", bind and function params, but when I select only one series, the tooltip is showing all 3 series with the percentages and this is something that I don't want. I want to show the value and percentage only for a color segment into the column.

Thanks in advance to any ideas :)

Maybe this helps: https://stackoverflow.com/questions/68104989/add-extra-variables-to-tooltip-pie-chart-echarts4r — Quinten, Jul 17 '22 at 11:15

score 0 · Answer 1 · answered Dec 20 '22 at 01:37

With only 3 numbers, you could manually type the values in. However, I've documented a dynamic approach you can use here. This looks through the data that creates the chart and recalculates the percentages.

I don't know exactly what you wanted to show in the tooltip, so I just modified the tip to include that percentage.

The only part of this code that's changed from your question is the argument formatter in e_tooltip().

dt |> 
  mutate(model = paste(zipcode, cat_a, cat_b, cat_c, percent_a,
                       percent_b, percent_c, total_abc, sep = ",")) |>
  e_charts(zipcode, elementId = 'chart') |> 
  e_bar(cat_a, stack = "st", name="cat_a", y_index = 0, 
        legend=TRUE, emphasis = list(focus = "series")) |> 
  e_bar(cat_b, stack = "st", name="cat_b", y_index = 0, legend=TRUE, emphasis = 
          list(focus = "series")) |> 
  e_bar(cat_c, stack = "st", name="cat_c", y_index = 0, legend=TRUE, emphasis = 
          list(focus = "series")) |>
  e_title("Count by ZIP Code") |>
  e_x_axis(nameLocation= "middle", nameGap=25) |>
  e_axis_labels(x = "ZIP Codes", y="count") |>
  e_legend(bottom = 0, 
           selected = list('cat_a' = TRUE, 
                           'cat_b' = TRUE,
                           'cat_c' = TRUE)) |> 
  e_tooltip(trigger="item", formatter = htmlwidgets::JS(
    "function(p) {
    el = get_e_charts('chart').getOption();    /* get all data */
    tots = 0;
    ser = p.componentIndex;                    /* get current series */
    el.series[ser].data.forEach((e, i, a) => {
      tots += Number(a[i].value[1]);           /* convert to number and sum */
    });
    pt = p.value[1];                           /* get current value */
    pct = ((pt / tots) * 100).toPrecision(3);  /* calculate percentage, round */
    return(p.seriesName + ' ' + '<br><br>Value: ' + p.value[1] + 
    '<br>Percentage: ' + pct + '%');
    }"),
    textStyle=list(fontFamily="arial", fontSize=12)) |>
  e_animation(duration=2000)

Echarts4r: Add extra variable to the tooltip for a stacked bar chart when using focus="series"

1 Answers1