Change hover text in Gantt chart

📊 Plotly Python
1

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

2

@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.

3

Perfect, thanks for the help!

4

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

5

Hi @MQ94,

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

Hope that helps!

-Jon