How to set the color of Individual Bars of a Waterfall Chart?

Plotly R, MATLAB, Julia, Net Plotly R
1

Hi

I am trying to change the color of the individual bars of a waterfall chart, more specifically the first and the last bar, I want it to be blue and yellow respectively. So in the below graph, Group 1 has to be blue and Group 2 has to be yellow.

Rplot
Rplot822×459 37.7 KB

Here is the code to generate the above graph:

library(plotly)

df <- data.frame(Rank = 1:7, Variable = c("Group 1","A","B","C","D","E","Group 2"),
Value = c(10,2,2,2,1,1,20),
measure = c("relative","relative","relative","relative","relative","relative","total"),
colour = c("yellow","green","green","green","green","green","blue"))


df$Variable <- factor(df$Variable, levels = unique(df$Variable))
df$text <- as.character(round(df$Value,2))
df$Factor <- as.numeric(df$Variable)



plot_ly(df, name = "20", type = "waterfall", measure = ~measure,
             x = ~Variable, textposition = "outside", y= ~Value, text =~paste0('$',text),
             hoverinfo='none',cliponaxis = FALSE,
             connector = list(line = list(color= "rgb(63, 63, 63)"))
        ) %>%
  layout(title = "",
         xaxis = list(title = ""),
         yaxis = list(title = "",tickprefix ='$'),
         autosize = TRUE,
         showlegend = FALSE
         )

Any help would be really appreciated.

2

Hi @abhivr is this example https://plot.ly/python/waterfall-charts/#setting-marker-size-and-color useful? It’s written in Python, but I hope you can translate readily translate it to Python. There is in fact an R version https://plot.ly/r/waterfall-charts/#setting-marker-size-and-color but for some reason the plot does not show… Anyway you need to set the marker color of the different groups (increasing, total etc.)

1 Like
3

Yes. I was actually aware of the option to set three colors for increasing, decreasing and total bars. However, my problem was I wanted to change the color of the first increasing bar to blue and the rest of the colors to be how it appeared normally (green and yellow).

I raised this question in StackOverflow and the fix I received was to add a rectangle to the graph to cover the bar.

You can read the solution in the below link

Hope this helps someone.

4

I know this is old, but in case its helpful to anyone. You can also use css to specifically change any of the bar’s color.

g.point:nth-of-type(x) path {
    fill: lightskyblue !important;
    stroke: lightskyblue !important;
}

Replace x with the number of the bar you want to update.