Adding additional values to hoverinfo for plotly pie chart

Question

I have a dataset df_tidy with 3 columns vocation, job_title, and n.

df_tidy <- structure(list(vocation = c("AC - Accounting", "AC - Accounting", 
"AD - Advertising/Public Relations", "AD - Advertising/Public Relations", 
"AF - Arts - Fine", "AF - Arts - Fine", "AF - Arts - Fine", "AF - Arts - Fine", 
"BA - Business - Administrative/Management", "BE - Business - Entrepreneur/Owner", 
"BE - Business - Entrepreneur/Owner", "BK - Banking", "BK - Banking", 
"BK - Banking", "CN - Consulting", "CO - Communications", "CO - Communications", 
"CP - Computing/Information Systems", "CP - Computing/Information Systems", 
"EA - Education - Higher Ed Administration", "EA - Education - Higher Ed Administration", 
"EA - Education - Higher Ed Administration", "EA - Education - Higher Ed Administration", 
"EA - Education - Higher Ed Administration", "EA - Education - Higher Ed Administration", 
"EA - Education - Higher Ed Administration", "ED - Education, Sec/Pri Ed Teaching (K-12)", 
"EM - Entertainment", "EN - Engineering", "EO - Education - Other", 
"ES - Education, Sec/Pri Ed Admin (K-12)", "ET - Education - Higher Ed Teaching", 
"EV - Environmental Sciences/Services", "FB - Fashion/Beauty", 
"FB - Fashion/Beauty", "FB - Fashion/Beauty", "FO - Fund Raising/Foundation", 
"FV - Finance/Venture Capital", "FV - Finance/Venture Capital", 
"GO - Government - Other", "HC - Health Care Administration", 
"IN - Insurance", "JW - Journalism/Writing", "LB - Human Resources/Labor", 
"LB - Human Resources/Labor", "LB - Human Resources/Labor", "LO - Law - Other", 
"LO - Law - Other", "LS - Library Science", "LW - Law - Lawyer", 
"LW - Law - Lawyer", "LW - Law - Lawyer", "MC - Museum/Cultural Centers", 
"MC - Museum/Cultural Centers", "MD - Media - Radio, TV, Film", 
"MD - Media - Radio, TV, Film", "MD - Media - Radio, TV, Film", 
"MS - Marketing/Sales", "MS - Marketing/Sales", "MS - Marketing/Sales", 
"MS - Marketing/Sales", "NP - Not-for-Profit", "NP - Not-for-Profit", 
"RC - Restaurant/Catering/Food Service", "RC - Restaurant/Catering/Food Service", 
"RC - Restaurant/Catering/Food Service", "RD - Research/Development", 
"TC - Telecommunications"), job_title = c("Agent", "Assurance Associate", 
"IT Recruiting Specialist/Admin Manager", "Senior Associate", 
"Assistant Registrar", "Associate Director, Arts in Education", 
"AVP, Head of Sale Managment", "Senior Researcher", "Assistant Director, Energy", 
"Co-Founder and Chief Executive Officer", "Founder & CEO", "Relationship Liaison II", 
"Senior Fund Accountant", "Vice President, Equity Analyst", "Verifying Supervisor", 
"Project Manager", "Senior Security Leader/Paranoids", "Founder/President", 
"VFX Coordinator", "Academic Program Assistant", "Assistant Director", 
"Assistant University Archivist", "Grad Research Assistant, Chief of Staff", 
"Instructor, Graduate Programs", "Library Clerk 2", "Program Associate", 
"Teacher", "Supervising Field Producer", "General Counsel", "Director of College Counseling", 
"Assistant High School Principal", "Teaching Assistant", "Director of Philanthropy", 
"Manager", "Sourcing Manager", "Visual Stylist", "Executive Director", 
"Chief Marketing Officer", "Financial Representative", "Executive Assistant", 
"Client Mgr., Global Health Benefits", "Programmer", "Writer", 
"Employment Specialist", "Human Resources Director", "Human Resources Specialist", 
"Director of Research", "Senior Health Policy Analyst", "Readers' Services Librarian", 
"Associate", "Partner", "Senior Assistant District Attorney", 
"Chief Curator", "Co-Founder and Partner", "Head of Creative/Executive Producer", 
"Head of Production", "Head of Technologies", "Digital Media Sales Operations Mgr", 
"Director of Sales and Marketing", "Regional Mktg. & Communications Dir.", 
"Sr. Production Designer", "Director of Media Relations", "Program Manager", 
"Bartender", "Guest Relations Coordinator", "Shift Supervisor", 
"Lab Manager", "Client Solution Exec. 3 - National Bus."), n = c(1L, 
1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
1L, 1L, 1L)), row.names = c(NA, -68L), groups = structure(list(
    vocation = c("AC - Accounting", "AD - Advertising/Public Relations", 
    "AF - Arts - Fine", "BA - Business - Administrative/Management", 
    "BE - Business - Entrepreneur/Owner", "BK - Banking", "CN - Consulting", 
    "CO - Communications", "CP - Computing/Information Systems", 
    "EA - Education - Higher Ed Administration", "ED - Education, Sec/Pri Ed Teaching (K-12)", 
    "EM - Entertainment", "EN - Engineering", "EO - Education - Other", 
    "ES - Education, Sec/Pri Ed Admin (K-12)", "ET - Education - Higher Ed Teaching", 
    "EV - Environmental Sciences/Services", "FB - Fashion/Beauty", 
    "FO - Fund Raising/Foundation", "FV - Finance/Venture Capital", 
    "GO - Government - Other", "HC - Health Care Administration", 
    "IN - Insurance", "JW - Journalism/Writing", "LB - Human Resources/Labor", 
    "LO - Law - Other", "LS - Library Science", "LW - Law - Lawyer", 
    "MC - Museum/Cultural Centers", "MD - Media - Radio, TV, Film", 
    "MS - Marketing/Sales", "NP - Not-for-Profit", "RC - Restaurant/Catering/Food Service", 
    "RD - Research/Development", "TC - Telecommunications"), 
    .rows = structure(list(1:2, 3:4, 5:8, 9L, 10:11, 12:14, 15L, 
        16:17, 18:19, 20:26, 27L, 28L, 29L, 30L, 31L, 32L, 33L, 
        34:36, 37L, 38:39, 40L, 41L, 42L, 43L, 44:46, 47:48, 
        49L, 50:52, 53:54, 55:57, 58:61, 62:63, 64:66, 67L, 68L), ptype = integer(0), class = c("vctrs_list_of", 
    "vctrs_vctr", "list"))), row.names = c(NA, 35L), class = c("tbl_df", 
"tbl", "data.frame"), .drop = TRUE), class = c("grouped_df", 
"tbl_df", "tbl", "data.frame"))

I used this dataset to make a plotly pie-chart named pie_chart_vocation_plotly:

library(plotly)

pie_chart_vocation_plotly <- plot_ly(df_tidy, labels = ~vocation, values = ~n, type = 'pie', textposition = 'outside', textinfo = 'label', hoverinfo = "text+percent", hovertext = paste("Job Titles: ", df_tidy$job_title)) %>%
  layout(title = 'Art History and Film Studies Alumni Career Tracks by Vocation<br>  1969 to 2019',
         xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
         yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
         showlegend = FALSE,
         margin = list(b = 300,
                       t = 95))

Problem

The hoverinfo for each vocation displays only 1 job_title per vocation. I would like the hoverinfo to include every job_tile for each specific vocation. For example, the hover info for EA - Education - Higher Ed Administration should read:

Job Titles:

Academic Program Assistant
Assistant Director
Assistant University Archivist
Grad Research Assistant, Chief of Staff
Instructor, Graduate Programs
Library Clerk 2
Program Associate

Percent of Total:

10.3%

score 1 · Accepted Answer · answered Oct 02 '20 at 16:51

The only way I can get this to work is if I aggregate the data to one row per vocation concatenating the names. I've used data.table, but hopefully gives you the gist.

I followed the last couple of R examples in here for the formatting https://plotly.com/r/hover-text-and-formatting/

and added the <extra></extra> part to the tooltip as it was returning an additional trace 0 as answered here: How to remove trace0 here?

You can replace your base plot_ly command with this and the layout addition works fine with it.


library(data.table)
dt <- as.data.table(df_tidy)
# summing the n for the volumes, and concatenate the jobs together with \n as a line break
dt_agg <- dt[, .(n=sum(n),
                 jobs=paste(job_title, collapse="\n")), by=vocation]

pie_chart_vocation_plotly <- plot_ly(dt_agg, 
                                     labels = ~vocation, 
                                     values = ~n, 
                                     type = 'pie', 
                                     text = ~jobs,
                                     textposition = 'outside', 
                                     textinfo = 'label',
                                     hovertemplate = 
                                       "<b>Job Titles</b>:<br><br>%{text}<br><br><b>Percent of total</b>:<br>%{percent}<extra></extra>"
                                     )

Adding additional values to hoverinfo for plotly pie chart

1 Answers1