Gantt Chart, set legend/colorbar at the top of chart

MQ94 · October 19, 2018, 8:03am

Hi,
I’m making a Gantt chart, but I’m having problems with the legend/colorbar. To view the legend on the right I need to scroll down to view it.

Is there a way to fix the legend so that it is at the top rather than the bottom? Or somewhere else where you do not have to scroll down to see it?

I have look at this https://plot.ly/python/legend/ , but I’m using

from plotly.offline import plot
import plotly.graph_objs as go
...
fig = ff.create_gantt(df, index_col='TaskType', group_tasks=True, show_colorbar=True, bar_width=0.4,
                          showgrid_x=True, showgrid_y=True)
fig['layout'].update(autosize=False, height=750, width=1400, margin=go.Margin(l=160, b=30))
plot(go.Figure(fig))

so I can’t get it to work.
Anyone who can help?

ebosi · October 19, 2018, 10:00am

Have you tried the following setting?

fig['layout'].update(legend={'x': 1, 'y': 1})

I am not particularly familiar with the syntax, yet you may want to investigate the idea further. 'x': 1 means “put the legend on the right side of the plot” (and 0 means “on the left side”). 'y': 1 is the same with the vertical axis (just check if 1 means “top” or “bottom”).

MQ94 · October 19, 2018, 12:37pm

Thanks for the answer.
I can move it to the left, but I still have to scroll down to see it.

jmmease · October 20, 2018, 10:27am

Hi @MQ94,

What version of plotly.py are you using? I think there was a fix for this in version 3.2 (https://github.com/plotly/plotly.py/pull/1110). Could you try updating?

-Jon

MQ94 · October 21, 2018, 9:49am

I think I have version 3.3.0.

In [16]: plotly.version
Out[16]: ‘3.3.0rc1’

I’m a beginner at Python and gantt chart, just so you know. So I’m not sure how to use the fix… As shown I use “show_colorbar” and not “showlegend”. If I write

fig = ff.create_gantt( … , showlegend=True)

I get the error: TypeError: create_gantt() got an unexpected keyword argument ‘showlegend’

jmmease · October 21, 2018, 10:18am

Hi @MQ94,

The change I referenced above is something that was added to version 3.2, so as long as you’re using a version newer than that there’s nothing extra you need to do to use it.

When I run https://plot.ly/python/gantt/#index-by-string-variable the legend displays correctly. Could you add an full code example that reproduces what you’re seeing?

-Jon

MQ94 · October 21, 2018, 11:16am

Hi @jmmease

So I’m taking data from a json fil, but here’s some of the code:

from plotly.offline import plot
import plotly.graph_objs as go
import plotly.figure_factory as ff
import pandas as pd

def createGantt(data1, data2):
    df = []
    for row in data1.itertuples():
        # Create the working hours
        workHours = row.workingHours
        df.append(dict(Task=row.shiftRef, Start='startTime',
                       Finish='endTime',
                       TaskType='WorkingHours'
                       ))
        # Create the tasks
        for elementAllocTask in row.allocatedTasks:
            df.append(dict(Task=row.shiftRef, Start='start',
                           Finish='end',
                           TaskType=elementAllocTask['taskTypeRef'],
                           Description='TaskRef: ' + elementAllocTask['taskRef']
                           ))
            # Create the transportation times
            for elementTransTime in row.transportationTimes:
                if elementAllocTask['taskRef'] == elementTransTime['fromTaskRef']:
                    df.append(dict(Task=row.shiftRef, Start='end',
                           Finish='end',
                           TaskType='TransportationTimes',
                           Description='Duration: ' + elementTransTime['travelDuration']
                           ))
    # Create the unplanned tasks
    for row in data2.itertuples():
        df.append(dict(Task=row.taskRef, Start=row.start,
                       Finish=row.end, TaskType=row.status))


    fig = ff.create_gantt(df, index_col='TaskType', group_tasks=True, show_colorbar=True, bar_width=0.4,
                          showgrid_x=True, showgrid_y=True)
    fig['layout'].update(autosize=False, height=750, width=1400, margin=go.Margin(l=160, b=30))
    plot(go.Figure(fig))

jmmease · October 22, 2018, 9:54am

Hi @MQ94,

Could you include include a small portion of data that reproduces the problem?

Thanks!
-Jon

MQ94 · October 24, 2018, 3:56pm

Hi @jmmease
Sorry, that is classified. But I think that the problem would be somewhere in the code I have already shared.

jmmease · October 25, 2018, 9:50am

Hi @MQ94,

It doesn’t need to be your actual data Just something that reproduces the problem. I can’t really diagnose what might be going on without being able to reproduce it.

-Jon

junh.tan · October 26, 2018, 7:33am

Hi @jmmease ,

I have the same issue as @MQ94, where the legend is right below and needs to scroll down to see it.

At first, I thought that maybe the issue could be how long the yaxis is, and due to a large number of unique tasks. However, sticking to the date string formats similar to the plotly example does not recreate the problem. I’ve tried to do some investigation and I believe the problem could be the use of timestamps rather than date strings.

The plotly example for ff.create_gantt() uses -> Start=‘2017-01-01’, Finish=‘2017-02-02’
For my case, ‘Start’: Timestamp(‘2018-07-07 00:00:00’), ‘Finish’: Timestamp(‘2019-01-10 00:00:00’), which creates the problem. Datatype was created from pd.to_datetime

junh.tan · October 29, 2018, 2:10am

Okay sorry about my previous response. Seems like the issue is if number of Tasks is >50 rather than the time format

MQ94 · October 29, 2018, 7:22am

Hi @junh.tan,
thanks for the answer, but I’m not sure how to solve it. I have made a set of the task (the length is only 11) and:

if len(task) < 40:
    fig = ff.create_gantt(df, index_col='TaskType', group_tasks=True, show_colorbar=True, bar_width=0.4,
                      showgrid_x=True, showgrid_y=True)
    fig['layout'].update(autosize=False, height=750, width=1400, margin=go.Margin(l=160, b=30))
    plot(go.Figure(fig))

but this does not solve the problem… Can you show how you have solved it?

junh.tan · October 29, 2018, 8:20am

Hi @MQ94,

To be honest I am not sure what am I doing right that you are not. But I can show you roughly what I have.

fig = ff.create_gantt(df, index_col=‘Resource’, show_colorbar=True, height=1200, width=900,showgrid_x=True, bar_width=0.2)

iplot(fig)

For my df, my Tasks are unique (i.e only one row per task) as compared to yours whereby your group_task=True. So this might be a reason for the difference between my result and yours. Also, i’m plotting in a jupyter notebook. Not sure if this affects as well.

MQ94 · November 18, 2018, 9:47am

Hi @jmmease

Here is an example of the data that produces the problem

{
  "solutionId" : null,
  "shiftSchedules" : [ {
    "employeeRef" : "PROFESSIONAL:3090",
    "shiftRef" : "195750",
    "opportunityRef" : "PROFESSIONAL:3090:2018-09-07T05:00:00Z",
    "allocatedTasks" : [ {
      "status" : "SUCCESFULLY_SCHEDULED",
      "taskRef" : "0&R148043",
      "taskTypeRef" : "RESOURCE_EVENT",
      "assignedShiftRefs" : [ "195750" ],
      "start" : "2018-09-07T05:00:00Z",
      "end" : "2018-09-07T05:30:00Z"
    }, {
      "status" : "SUCCESFULLY_SCHEDULED",
      "taskRef" : "0&580340-2018-09-07",
      "taskTypeRef" : "PLANNED_GRANT_EVENT",
      "assignedShiftRefs" : [ "195750" ],
      "start" : "2018-09-07T06:12:00Z",
      "end" : "2018-09-07T07:19:00Z"
    }, {
      "status" : "SUCCESFULLY_SCHEDULED",
      "taskRef" : "0&580339-2018-09-07",
      "taskTypeRef" : "PLANNED_GRANT_EVENT",
      "assignedShiftRefs" : [ "195750" ],
      "start" : "2018-09-07T07:22:00Z",
      "end" : "2018-09-07T08:53:00Z"
    }, {
      "status" : "SUCCESFULLY_SCHEDULED",
      "taskRef" : "0&580337-2018-09-07",
      "taskTypeRef" : "PLANNED_GRANT_EVENT",
      "assignedShiftRefs" : [ "195750" ],
      "start" : "2018-09-07T08:57:00Z",
      "end" : "2018-09-07T10:46:00Z"
    }, {
      "status" : "SUCCESFULLY_SCHEDULED",
      "taskRef" : "0&580338-2018-09-07",
      "taskTypeRef" : "PLANNED_GRANT_EVENT",
      "assignedShiftRefs" : [ "195750" ],
      "start" : "2018-09-07T10:50:00Z",
      "end" : "2018-09-07T11:59:00Z"
    } ],
    "workingHours" : {
      "startTime" : "2018-09-07T05:00:00Z",
      "endTime" : "2018-09-07T13:00:00Z"
    },
    "transportationTimes" : [ {
      "travelDuration" : "00:42",
      "fromTaskRef" : "0&R148043",
      "toTaskRef" : "0&580340-2018-09-07"
    }, {
      "travelDuration" : "00:03",
      "fromTaskRef" : "0&580340-2018-09-07",
      "toTaskRef" : "0&580339-2018-09-07"
    }, {
      "travelDuration" : "00:04",
      "fromTaskRef" : "0&580339-2018-09-07",
      "toTaskRef" : "0&580337-2018-09-07"
    }, {
      "travelDuration" : "00:04",
      "fromTaskRef" : "0&580337-2018-09-07",
      "toTaskRef" : "0&580338-2018-09-07"
    } ]
  } ],
  "plannedTasks" : [ {
    "status" : "SUCCESFULLY_SCHEDULED",
    "taskRef" : "0&R148044",
    "taskTypeRef" : "RESOURCE_EVENT",
    "assignedShiftRefs" : [ "195650" ],
    "start" : "2018-09-07T05:00:00Z",
    "end" : "2018-09-07T05:30:00Z"
  }, {
    "status" : "SUCCESFULLY_SCHEDULED",
    "taskRef" : "0&580339-2018-09-07",
    "taskTypeRef" : "PLANNED_GRANT_EVENT",
    "assignedShiftRefs" : [ "195750" ],
    "start" : "2018-09-07T07:22:00Z",
    "end" : "2018-09-07T08:53:00Z"
  }, {
    "status" : "SUCCESFULLY_SCHEDULED",
    "taskRef" : "0&580345-2018-09-07",
    "taskTypeRef" : "PLANNED_GRANT_EVENT",
    "assignedShiftRefs" : [ "195650" ],
    "start" : "2018-09-07T06:09:00Z",
    "end" : "2018-09-07T07:24:00Z"
  }, {
    "status" : "SUCCESFULLY_SCHEDULED",
    "taskRef" : "0&R148043",
    "taskTypeRef" : "RESOURCE_EVENT",
    "assignedShiftRefs" : [ "195750" ],
    "start" : "2018-09-07T05:00:00Z",
    "end" : "2018-09-07T05:30:00Z"
  } ],
  "unplannedTasks" : [ {
    "status" : "CANNOT_BE_SCHEDULED",
    "taskRef" : "0&580342-2018-09-07",
    "taskTypeRef" : "PLANNED_GRANT_EVENT",
    "assignedShiftRefs" : [ ],
    "start" : "2018-09-06T22:00:00Z",
    "end" : "2018-09-06T23:08:00Z"
  }, {
    "status" : "CANNOT_BE_SCHEDULED",
    "taskRef" : "0&580346-2018-09-07",
    "taskTypeRef" : "PLANNED_GRANT_EVENT",
    "assignedShiftRefs" : [ ],
    "start" : "2018-09-06T22:00:00Z",
    "end" : "2018-09-06T23:51:00Z"
  }, {
    "status" : "CANNOT_BE_SCHEDULED",
    "taskRef" : "0&580347-2018-09-07",
    "taskTypeRef" : "PLANNED_GRANT_EVENT",
    "assignedShiftRefs" : [ ],
    "start" : "2018-09-06T22:00:00Z",
    "end" : "2018-09-06T23:42:00Z"
  }, {
    "status" : "CANNOT_BE_SCHEDULED",
    "taskRef" : "0&580348-2018-09-07",
    "taskTypeRef" : "PLANNED_GRANT_EVENT",
    "assignedShiftRefs" : [ ],
    "start" : "2018-09-06T22:00:00Z",
    "end" : "2018-09-06T23:53:00Z"
  }, {
    "status" : "CANNOT_BE_SCHEDULED",
    "taskRef" : "0&580349-2018-09-07",
    "taskTypeRef" : "PLANNED_GRANT_EVENT",
    "assignedShiftRefs" : [ ],
    "start" : "2018-09-06T22:00:00Z",
    "end" : "2018-09-06T23:22:00Z"
  } ],
  "scenarioId" : null,
  "jobId" : -1,
  "links" : [ ]
}

jmmease · November 19, 2018, 10:37am

Thanks for the data @MQ94, but I’m not sure you to use it to create your plot. Could you add the code that uses this data to call the figure factor?
-Jon

qdumont · December 14, 2018, 10:33am

Hi guys,

I am replying because I am facing the same issue after trying to use a Gantt Chart.

Blockquote
Hi @MQ94, What version of plotly.py are you using? I think there was a fix for this in version 3.2 (https://github.com/plotly/plotly.py/pull/1110 ). Could you try updating?
-Jon

I don’t consider this as a permanent solution because the solution is just to turn showlegend to False (showlegend = False).

Curious about it, I put a color background to the legend, and it shows something funny.
Could it help Plotly team to understand and fix the issue ?

It seems that every single trace provide a legend but only the last one is active.

Here is the code used :

fig = ff.create_gantt(data_2000.iloc[:5], index_col = 'Resource', show_colorbar=True, bar_width=0.2, showgrid_x=True, showgrid_y=True)
fig['layout'].update(autosize = True, margin = dict(l=100), legend=dict(bgcolor='#E2E2E2'))

Finally, a temporary solution is to set :

traceorder=‘reversed’,

However, if the legend is longer than the chart, the scrollbar keep appearing.

Best,

Quentin.

jmmease · December 14, 2018, 11:26am

Hi @qdumont, @junh.tan, and @MQ94,

I’m happy to take a look, but I still need someone to provide the exact version of plotly.py that they are using along with a full reproducible example (including imports, data, code, etc.) of the issue.

Thanks!
-Jon

kna · April 2, 2019, 9:18am

Hi @jmmease, I have the same issue as the other users, so I created a sample data that you can test.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.figure_factory as ff
import pandas as pd



df1 = pd.DataFrame({'TaskName': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'I', 'J', 'K'],
                'StartDate1' : ['2019-03-27 00:00:00','2019-03-27 00:00:30', '2019-03-27 00:01:00', '2019-03-27 00:01:30', '2019-03-27 00:01:40',
                             '2019-03-27 00:02:30', '2019-03-27 00:03:00', '2019-03-27 00:03:30', '2019-03-27 00:04:00', '2019-03-27 00:04:30'],
                'EndDate1': ['2019-03-27 00:03:00', '2019-03-27 00:03:20', '2019-03-27 00:04:10', '2019-03-27 00:03:40', '2019-03-27 00:05:50',
                            '2019-03-27 00:06:40', '2019-03-27 00:07:10', '2019-03-27 00:08:00', '2019-03-27 00:08:20', '2019-03-27 00:08:40'],
                'StartDate2' : ['2019-03-27 00:03:00', '2019-03-27 00:03:20', '2019-03-27 00:04:10', '2019-03-27 00:03:40', '2019-03-27 00:05:50',
                            '2019-03-27 00:06:40', '2019-03-27 00:07:10', '2019-03-27 00:08:00', '2019-03-27 00:08:20', '2019-03-27 00:08:40'],
                'EndDate2': ['2019-03-27 00:04:00', '2019-03-27 00:04:20', '2019-03-27 00:05:10', '2019-03-27 00:05:40', '2019-03-27 00:06:50',
                            '2019-03-27 00:07:40', '2019-03-27 00:08:10', '2019-03-27 00:09:00', '2019-03-27 00:09:20', '2019-03-27 00:09:40']})

def gantt_fig3(df1):
    data3 = []
    for row in df1.itertuples():
        data3.append(dict(Task=str(row.TaskName), Start=str(row.StartDate1),
                      Finish=str(row.EndDate1), Resource='Resource1'))
        data3.append(dict(Task=str(row.TaskName), Start=str(row.StartDate2),
                      Finish=str(row.EndDate2), Resource='Resource2'))


    fig = ff.create_gantt(data3, index_col='Resource', title='Gantt Chart', show_colorbar = True, group_tasks = True , height=500, width=1300 )
    fig['layout'].update(legend=dict(traceorder='reversed'))
    return fig

app = dash.Dash()


app.layout = html.Div(children=[
    html.H1(children='Gantt Chart'),       
    dcc.Graph(
        id='gantt-chart',
        figure = gantt_fig3(df1))
])

if __name__ == '__main__':
    app.run_server(debug=True, port=9000)

This is the output that I get. The command ‘traceorder=reversed’ places the legend at the top. Also, because I said that ‘group_tasks=True’, the tasks are displayed from the top to the bottom, and not from bottom to top.
My version of plotly is 3.4.1

jmmease · April 4, 2019, 11:29am

Thanks @kna, that’s exactly what was needed I’ve opened an issue at https://github.com/plotly/plotly.py/issues/1493.

Topic		Replies	Views
Gantt Chart legend displaying in the wrong order 📊 Plotly Python	1	1148	April 20, 2020
Gantt plot with annotations on bar 📊 Plotly Python	0	1067	August 9, 2020
Plotly GANTT Chart Sorting? 📊 Plotly Python	2	2797	February 5, 2020
Gantt cannot plot time in y axis and not listing all legends 📊 Plotly Python	7	94	February 13, 2024
Combining Table with Gantt Chart as subplot 📊 Plotly Python question	4	1072	June 7, 2023

Gantt Chart, set legend/colorbar at the top of chart

Related Topics