How to display percent of all series total as a stackLabel on stacked bar chart in highcharter

Question

I am needing to display stackLabels on the stacked bar chart as both a total of the stack and a percent of the total. This question gives a version of the answer I am looking for, but the data var they declare at the beginning of the code is hardcoded data, whereas I will need it to be dynamic. Additionally, I have several series I am dealing with that all need to be summed together (example below just uses two). I think the main thing I am missing is how to reference associated data from JS code to sum over it? I am very unfamiliar with JS.

For the example code and plot below, I want the stackLabels to say '30(30%)' for a, '20(20%)' for b, '50(50%)' for a. (If it was a different data set of 10, 20, and 30 it would be '10(17%)' for a, '20(33%)' for b, '30(50%)' for c since the total across everything would be 60.)

library(highcharter)
library(dplyr)

df <- data.frame(z = c(20,4,6,8,25),
                y = c(3,3,2,4,25),
                x = c('a', 'a', 'b', 'b', 'c'))
df <- df %>% group_by(x) %>% summarize(y = sum(y), z = sum(z), total = sum(y,z))
df

highchart() %>% 
  hc_chart(type = 'column') %>% 
  hc_plotOptions(column = list(stacking = 'normal')) %>% 
  hc_xAxis(categories = as.factor(unique(df$x))) %>% 
  hc_add_series(df$y, name = 'y', stack = 'stack') %>% 
  hc_add_series(df$z, name = 'z', stack = 'stack') %>% 
  hc_yAxis(stackLabels = list(enabled = TRUE)) %>% 
  hc_tooltip(shared = TRUE)

Test Plot

Based on the linked question above, I am thinking I need to alter the code to add a loop sum, but am not sure how to finish it.

highchart() %>% 
  hc_chart(type = 'column') %>% 
  hc_plotOptions(column = list(stacking = 'normal')) %>% 
  hc_xAxis(categories = as.factor(unique(df$x))) %>% 
  hc_add_series(df$y, name = 'y', stack = 'stack') %>% 
  hc_add_series(df$z, name = 'z', stack = 'stack') %>% 
  hc_yAxis(stackLabels = list(enabled = TRUE, 
                              formatter = JS("function() {var data = *reference to the data*;
                                                          var dataSum = 0;
                                                          for (var i=0;i < data.length;i++) {
                                                              dataSum += data[i]
                                                          }
                                                          var pcnt = (this.y / dataSum) * 100;
                                                          return Highcharts.numberFormat(pcnt) + '%';
                                                      }"))) %>% 
  hc_tooltip(shared = TRUE)

Please advise. Still new to stack overflow so let me know if I missed anything.

Answer 1

Edit

Revised answer as OP appears to want each stack label to show the subtotal as a proportion of all stacks as well as the N.

I added some more random data to the set. The main thing is to include the total across every series. Then you can use that number within formatter to divide the stack totals.

df <- data.frame(
  z = c(20,4,26,8,25,10),
  y = c(3,10,2,34,25,41),
  x = c('a','a','b','b','c','c')
)

df <- df %>% 
  group_by(x) %>% 
  summarize(y = sum(y), z = sum(z), sub_total = sum(y,z)) %>%
  mutate(total = sum(sub_total))

highchart() %>% 
  hc_chart(type = 'column') %>% 
  hc_plotOptions(column = list(stacking = 'normal')) %>% 
  hc_xAxis(categories = as.factor(unique(df$x))) %>% 
  hc_add_series(df$y, name = 'y', stack = 'stack') %>% 
  hc_add_series(df$z, name = 'z', stack = 'stack') %>% 
  hc_yAxis(stackLabels = list(enabled = TRUE,
    formatter = JS(paste0("function() {
      var prop = this.total / ", unique(df$total) ," * 100
      prop = Highcharts.numberFormat(prop)
      return this.total + ' (' + prop + '%)';
    }")))) %>% 
  hc_tooltip(shared = TRUE)

---

Prev Answer

I'm not quite sure what you're asking.

I am needing to display stackLabels on the stacked bar chart as both a total of the stack and a percent of the total.

It would seem to me that "% of the total" should always equal 100% if you're taking the sum of all series, e.g. total/total = 1. However, maybe I'm missing something here.

In any case, the following code will replicate the stack labels you're looking for. Where this.total represents the total of each stacked item.

highchart() %>% 
  hc_chart(type = 'column') %>% 
  hc_plotOptions(column = list(stacking = 'normal')) %>% 
  hc_xAxis(categories = as.factor(unique(df$x))) %>% 
  hc_add_series(df$y, name = 'y', stack = 'stack') %>% 
  hc_add_series(df$z, name = 'z', stack = 'stack') %>% 
  hc_yAxis(stackLabels = list(enabled = TRUE,
    formatter = JS("function() {
      return this.total + '(' + this.total + '%)'             
    }"))) %>% 
  hc_tooltip(shared = TRUE)