Search code examples
rhoverplotlystacked-area-chart

Format hover text to $ in stacked area plot (R / Plot.ly)

How can I format plot.ly's 'text' to a dollar amount (or anything else) like this - $4,000,000 (with commas) - in R?

Even though my 'real' data is already formatted as $, once I do hoverinfo='x+text' in the add_trace function, it loses the formatting. Hoverformat = "$,f" in the plotly's layout function didn't help as well.

Here is the reproducible example in R for the stacked area plot:

library(plotly)

season <- c('Winter', 'Spring', 'Summer', 'Fall')
y1_real<- c(40, 80, 95, 10)
y2_real<- c(20, 55, 10, 10)
y3_real<- c(40, 10, 60, 180)

df= data.frame(season, y1_real, y2_real, y3_real)

#changing the format of the real data to $

class(df$y1_real)<- c("money", class(df$y1_real) )
class(df$y2_real)<- c("money", class(df$y2_real))
class(df$y3_real)<- c("money", class(df$y3_real))

df$y3_stck<- df$y3_real + df$y2_real + df$y1_real
df$y2_stck<- df$y2_real + df$y1_real
df$y1_stck<- df$y1_real

p1<- plot_ly(df, x=season, y=y1_stck, text=df$y1_real, hoverinfo='x+text+name', name="Blue", fill="tonexty")
p2<- add_trace(p1, x=season, y=y2_stck, text=df$y2_real, hoverinfo='x+text+name', name="Orange", fill="tonexty")
p3<- add_trace(p2, x=season, y=y3_stck, text=df$y3_real, hoverinfo='x+text+name', name="Green", fill="tonexty")

p4<- layout(yaxis=list(showgrid=FALSE, showline=FALSE, hoverformat="$,f"))
p4

Thanks!

Solution

  • here is a suggestion :-) create three new columns with a dollar sign in it.

    df$y1_reald <- paste(y1_real, "$", sep="")
df$y2_reald <- paste(y2_real, "$", sep="")
df$y3_reald <- paste(y3_real, "$", sep="")

    and use these three new columns in the text argument. You will see the $ displayed

    p1<- plot_ly(df, x=season, y=y1_stck, text=df$y1_reald, hoverinfo='x+text+name', name="Blue", fill="tonexty")
p2<- add_trace(p1, x=season, y=y2_stck, text=df$y2_reald, hoverinfo='x+text+name', name="Orange", fill="tonexty")
p3<- add_trace(p2, x=season, y=y3_stck, text=df$y3_reald, hoverinfo='x+text+name', name="Green", fill="tonexty")

p4<- layout(yaxis=list(showgrid=FALSE, showline=FALSE, hoverformat="$,f"))
p4

    enter image description here

    EDIT: Following a question in comments

    almost the same code but just multiply your columns by the number that will give you the number you want and add "," for separator.

    y1_reald <- (y1_real*100000)
y2_reald <- (y2_real*100000)
y3_reald <- (y3_real*100000)
y1_reald <- prettyNum(y1_reald,big.mark=",",scientific=FALSE)
y2_reald <- prettyNum(y2_reald,big.mark=",",scientific=FALSE)
y3_reald <- prettyNum(y3_reald,big.mark=",",scientific=FALSE)
#
df$y1_reald <- paste(y1_reald, "$", sep="")
df$y2_reald <- paste(y2_reald, "$", sep="")
df$y3_reald <- paste(y3_reald, "$", sep="")

    then just run 

    p1<- plot_ly(df, x=season, y=y1_stck, text=df$y1_reald, hoverinfo='x+text+name', name="Blue", fill="tonexty")
p2<- add_trace(p1, x=season, y=y2_stck, text=df$y2_reald, hoverinfo='x+text+name', name="Orange", fill="tonexty")
p3<- add_trace(p2, x=season, y=y3_stck, text=df$y3_reald, hoverinfo='x+text+name', name="Green", fill="tonexty")

p4<- layout(yaxis=list(showgrid=FALSE, showline=FALSE, hoverformat="$,f"))
p4

    which will give you the graph you want.

    enter image description here