R Plotly - add_trace that sums value by group

Question

Attempting to build a plotly grouped bar graph that adds a line summing the values by grouping a column.

Here's an example:

if (interactive()) {
  library(plotly)
  
  year <- c("2020", "2020", "2021", "2021", "2022", "2022", "2023", "2023", "2024", "2024", "2025", "2025")
  foodType <- c("Vegetable", "Fruit", "Vegetable", "Fruit", "Vegetable", "Fruit", "Vegetable", "Fruit", "Vegetable", "Fruit", "Vegetable", "Fruit")
  foodQty <- c(10, 10, 11, 17, 21, 23, 3, 4, 16, 2, 7, 43)
  
  data <- data.frame(year, foodType, foodQty)

  
  ui <- fluidPage(
    plotlyOutput("foodPlot")
  )
  
  server <- function(input, output, session) {
    output$foodPlot <- renderPlotly({
      plot_ly(data, x = ~year, y = ~foodQty, type = 'bar', color = ~foodType,
              hoverinfo = 'text',
              hovertext = ~paste0(foodType, ' ', foodQty)) %>%
        add_trace(x = ~year, y = ~foodQty,
                  type = 'scatter', mode = 'lines', name = 'Total Qty',
                  line = list(color = 'red'),
                  hoverinfo = "text",
                  hovertext = ~paste(foodQty),
                  transforms = list(list(type = 'aggregate', groups = ~year,
                                         aggregations = list(list(target = 'y', func = 'sum', enabled = T))))) %>%
        layout(xaxis = list(title = "", tickangle = -90), yaxis = list(title = ""),
               barmode = 'group') %>%
        config(displaylogo = FALSE, collaborate = FALSE,
               modeBarButtonsToRemove =
                 list("sendDataToCloud","zoom2d","pan2d","select2d","lasso2d",
                      "zoomIn2d","zoomOut2d","autoScale2d","hoverClosestCartesian",
                      "hoverCompareCartesian"))
    })
  }
  shinyApp(ui, server)
}

My goal is to have one red Total Qty line that sums by year . So in 2020 it would be 20, in 2021 it would be 28, etc. In this example, I attempted to use the transforms property but it's not working as I thought it would.

I've also tried to replace the x and y values in the add_trace to

x = ~aggregate(data$foodQty, by=list(year=data$year), FUN=sum)$year,
y = ~aggregate(data$foodQty, by=list(year=data$year), FUN=sum)$x,

Still no luck. Thanks for your help!

Answer 1

You can use inherit = FALSE to avoid passing attributes from plot_ly() to add_trace and create a new dataset via aggregate - Please check the following:

library(shiny)
library(plotly)

year <- c("2020", "2020", "2021", "2021", "2022", "2022", "2023", "2023", "2024", "2024", "2025", "2025")
foodType <- c("Vegetable", "Fruit", "Vegetable", "Fruit", "Vegetable", "Fruit", "Vegetable", "Fruit", "Vegetable", "Fruit", "Vegetable", "Fruit")
foodQty <- c(10, 10, 11, 17, 21, 23, 3, 4, 16, 2, 7, 43)

data <- data.frame(year, foodType, foodQty)

ui <- fluidPage(
  plotlyOutput("foodPlot")
)

server <- function(input, output, session) {
  output$foodPlot <- renderPlotly({
    plot_ly(data, x = ~year, y = ~foodQty, type = 'bar', color = ~foodType,
            hoverinfo = 'text',
            hovertext = ~paste0(foodType, ' ', foodQty)) %>%
      add_trace(data = aggregate(foodQty ~ year, data = data, sum), x = ~year, y = ~foodQty,
                type = 'scatter', mode = 'lines', name = 'Total Qty',
                line = list(color = 'red'),
                hoverinfo = "text",
                hovertext = ~paste(foodQty), inherit = FALSE) %>%
      layout(xaxis = list(title = "", tickangle = -90), yaxis = list(title = ""),
             barmode = 'group') %>%
      config(displaylogo = FALSE, collaborate = FALSE,
             modeBarButtonsToRemove =
               list("sendDataToCloud","zoom2d","pan2d","select2d","lasso2d",
                    "zoomIn2d","zoomOut2d","autoScale2d","hoverClosestCartesian",
                    "hoverCompareCartesian"))
  })
}
shinyApp(ui, server)