Black Lives Matter. Please consider donating to Black Girls Code today.

Change hover text in Gantt chart

Hi Folks,

I’m new to plotly and struggling to get the hover text in my gantt chart to work the way I want.

Chart:
https://plot.ly/~jgraham0325/13/build-pipeline-timings-on-2017-11-21-and-2017-11-10/

Requirement:

  • Show the duration of each section of the bar chart when hover over (or put a label on each one but that doesn’t seem as easy). It’s a bit hard to compare them without the actual number. By default it only shows the start time and the end time (as well as a lot of other stuff I don’t want like the y axis value name)

Environment:

  • Python 2.7 using plotly api

Example of main processing function:

plot_data = []
query_job_date_1 = datetime.date(2017, 11, 21)
query_job_date_2 = datetime.date(2017, 11, 10)

    create_plot_data(plot_data, query_job_date_1)
    create_plot_data(plot_data, query_job_date_2)

    # Create gantt chart
    fig = ff.create_gantt(plot_data,
                          title='Build pipeline timings on {} and {}'.format(query_job_date_1.isoformat(), query_job_date_2.isoformat()),
                          showgrid_x=True,
                          index_col='JobName'
                          )
    fig['layout']['margin'] = go.Margin(l=285, r=10)
    py.plot(fig, filename='gantt-simple-gantt-chart-{}-to-{}'.format(query_job_date_1.isoformat(),query_job_date_2.isoformat()), world_readable=True)

Example of adding some data to the plot_data dictionary:

#Add to master dataset to plot. Task, Start and Finish are mandatory
task_display_name = job_display_name.replace(’[POC]’, ‘’).replace(’[A]’, ‘’).replace(’[B]’,’’) + ’ ’ + query_job_date.isoformat()
plot_data.append(dict(Task=task_display_name, Start=basetime, Finish=enddate, JobName=job_display_name))

Things I’ve tried:

  • adding hoverinfo=“text” to “ff.create_gantt” method. It doesn’t accept it for gantt charts
  • add a “Text” element to my input data

Any help would be greatly appreciated!

Thanks

@jgraham0325 To update the dicts in fig['data'], or the dict fig['layout'], just run your code in offline mode, and
print fig['data']. You’ll get a list of 16 traces (in the case of your posted example).
Define the text you want to insert in some dict, fig['data'][k]. and then update that dict as follows:

 fig['data'][k].update(text=your_text,
                       hoverinfo="text+x+y")# or "text+x" or "text+y" or "text", depending on what you want to display on hover

The dict fig['layout'] can be updated similarly.

Perfect, thanks for the help!

I don’t fully understand it. Can someone post the full code?

Hi @MQ94,

Here’s an example of using the Description field to add custom hover information to a Gantt chart:

Hope that helps!

-Jon