plotly borders getting overlapping gantt chart

Question

please see the below image I am trying to create border to gantt chart, but getting the below issues. Please see my code below, I am getting errors in the graph shown and I am not sure how to proceed

I am trying to create border to gantt chart, but getting the below issues. Please see my code below, I am getting errors in the graph shown and I am not sure how to proceed

I am trying to create border to gantt chart, but getting the below issues. Please see my code below, I am getting errors in the graph shown and I am not sure how to proceed

import plotly
import plotly.figure_factory as ff

df = [
dict(Task=‘Evening Sleep’, Start=‘2009-01-01’, Finish=‘2009-02-28’, Resource=‘Sleep’, Description = ‘my hover1’ ),
dict(Task=‘Evening Sleep’, Start=‘2009-03-05’, Finish=‘2009-04-15’, Resource=‘Sleep’, Description = ‘my hover1’),
dict(Task=‘Evening Sleep’, Start=‘2009-04-05’, Finish=‘2009-05-15’, Resource=‘Sleep’, Description = ‘my hover1’),
dict(Task=‘Evening Sleep’, Start=‘2009-05-05’, Finish=‘2009-06-15’, Resource=‘Sleep’, Description = ‘my hover1’),
dict(Task=‘Morning Sleep’, Start=‘2009-06-05’, Finish=‘2009-07-15’, Resource=‘Cardio’, Description = ‘my hover1’),
dict(Task=‘Morning Sleep’, Start=‘2009-07-05’, Finish=‘2009-08-15’, Resource=‘Cardio’, Description = ‘my hover1’),
dict(Task=‘Morning Sleep’, Start=‘2009-08-05’, Finish=‘2009-09-15’, Resource=‘Cardio’, Description = ‘my hover1’),
dict(Task=‘Morning Sleep’, Start=‘2009-09-05’, Finish=‘2009-10-15’, Resource=‘Cardio’, Description = ‘my hover1’)

]

colors = dict(Cardio = ‘rgb(46, 137, 205)’,
Food = ‘rgb(114, 44, 121)’,
Sleep = ‘rgb(198, 47, 105)’)

fig = ff.create_gantt(df, colors=colors, index_col=‘Resource’, title=‘Daily Schedule’,show_colorbar=True, showgrid_x=True, showgrid_y=True, group_tasks=True)

#fig = ff.create_gantt(df, group_tasks=True)
fig.update_traces(mode=‘lines’, line_color=‘yellow’, selector=dict(fill=‘toself’))
for trace in fig.data:
trace.x += (trace.x[0],)
trace.y += (trace.y[0],)

fig.show()

fig = ff.create_gantt(df, colors=colors, index_col=‘Resource’, title=‘Daily Schedule’,show_colorbar=True, showgrid_x=True, showgrid_y=True, group_tasks=True)

#fig = ff.create_gantt(df, group_tasks=True)enter code here
import plotly
import plotly.figure_factory as ff

df = [
dict(Task=‘Evening Sleep’, Start=‘2009-01-01’, Finish=‘2009-02-28’, Resource=‘Sleep’, Description = ‘my hover1’ ),
dict(Task=‘Evening Sleep’, Start=‘2009-03-05’, Finish=‘2009-04-15’, Resource=‘Sleep’, Description = ‘my hover1’),
dict(Task=‘Evening Sleep’, Start=‘2009-04-05’, Finish=‘2009-05-15’, Resource=‘Sleep’, Description = ‘my hover1’),
dict(Task=‘Evening Sleep’, Start=‘2009-05-05’, Finish=‘2009-06-15’, Resource=‘Sleep’, Description = ‘my hover1’),
dict(Task=‘Morning Sleep’, Start=‘2009-06-05’, Finish=‘2009-07-15’, Resource=‘Cardio’, Description = ‘my hover1’),
dict(Task=‘Morning Sleep’, Start=‘2009-07-05’, Finish=‘2009-08-15’, Resource=‘Cardio’, Description = ‘my hover1’),
dict(Task=‘Morning Sleep’, Start=‘2009-08-05’, Finish=‘2009-09-15’, Resource=‘Cardio’, Description = ‘my hover1’),
dict(Task=‘Morning Sleep’, Start=‘2009-09-05’, Finish=‘2009-10-15’, Resource=‘Cardio’, Description = ‘my hover1’)

]

colors = dict(Cardio = ‘rgb(46, 137, 205)’,
Food = ‘rgb(114, 44, 121)’,
Sleep = ‘rgb(198, 47, 105)’)

fig = ff.create_gantt(df, colors=colors, index_col=‘Resource’, title=‘Daily Schedule’,show_colorbar=True, showgrid_x=True, showgrid_y=True, group_tasks=True)

#fig = ff.create_gantt(df, group_tasks=True)
fig.update_traces(mode=‘lines’, line_color=‘yellow’, selector=dict(fill=‘toself’))
for trace in fig.data:
trace.x += (trace.x[0],)
trace.y += (trace.y[0],)

fig.show()

fig = ff.create_gantt(df, colors=colors, index_col=‘Resource’, title=‘Daily Schedule’,show_colorbar=True, showgrid_x=True, showgrid_y=True, group_tasks=True)

#fig = ff.create_gantt(df, group_tasks=True)

Answer 1

To add a border to a chart see here , but in summary you need this:

fig.update_xaxes(showline=True, linewidth=1, linecolor='black', mirror=True)
fig.update_yaxes(showline=True, linewidth=1, linecolor='black', mirror=True)

...but this is not what you really needed.

To get the full border around each bar you should only need something like:

fig.update_traces(marker_line_color='yellow', marker_line_width=1, opacity=0.6)

...but this method only updates opacity for some reason (but works on other types of bar charts).

Using your method you need to add three more points to get the line closed:

• (0,None) to distinguish the new line.
• (0,0) to start up the new line at the beginning
• (0, last point) to finish the line

I've added several more comments in the code below:

Solution A

import plotly
import plotly.figure_factory as ff

df = [
dict(Task='Evening Sleep', Start='2009-01-01', Finish='2009-02-28', Resource='Sleep', Description = 'my hover1' ),
dict(Task='Evening Sleep', Start='2009-03-05', Finish='2009-04-15', Resource='Sleep', Description = 'my hover1'),
dict(Task='Evening Sleep', Start='2009-04-05', Finish='2009-05-15', Resource='Sleep', Description = 'my hover1'),
dict(Task='Evening Sleep', Start='2009-05-05', Finish='2009-06-15', Resource='Sleep', Description = 'my hover1'),
dict(Task='Morning Sleep', Start='2009-06-05', Finish='2009-07-15', Resource='Cardio', Description = 'my hover1'),
dict(Task='Morning Sleep', Start='2009-07-05', Finish='2009-08-15', Resource='Cardio', Description = 'my hover1'),
dict(Task='Morning Sleep', Start='2009-08-05', Finish='2009-09-15', Resource='Cardio', Description = 'my hover1'),
dict(Task='Morning Sleep', Start='2009-09-05', Finish='2009-10-15', Resource='Cardio', Description = 'my hover1')
]

colors = dict(Cardio = 'rgb(46, 137, 205)', Food = 'rgb(114, 44, 121)',
              Sleep = 'rgb(198, 47, 105)')

fig = ff.create_gantt(df, colors=colors, index_col='Resource', 
                      title='Daily Schedule', show_colorbar=True, 
                      showgrid_x=True, showgrid_y=True, group_tasks=True)

fig.update_traces(mode='lines', line_color='yellow', selector=dict(fill='toself'))
for trace in fig.data:
    # WE NEED TO ADD THREE POINTS HERE:
    #print(trace.x)
    trace.x += (trace.x[0],)
    trace.x += (trace.x[0],)
    trace.x += (trace.x[0],)
    #print(trace.x)
    #print(trace.y)
    trace.y += (trace.y[-5],) #this adds a None to distinguish the new line (from the previous break)
    trace.y += (trace.y[0],)  #this starts us off with the first point
    trace.y += (trace.y[-3],) # this finishes us with the last point (now 3 positions back)
    #print(trace.y)
fig.show()

Also, if you uncomment those print statements you'll see the resulting points before and after.

Solution A modification

You can also add all three points at once like this (which is a bit cleaner):

for trace in fig.data:
    trace.x += (trace.x[0], trace.x[0], trace.x[0])
    trace.y += (trace.y[-5], trace.y[0], trace.y[-1])