Having round corners for Gantt Chart and another hover location

I created this Gantt Chart (a shortened version of the original) and would like to have round corners between the different bars.

https://plot.ly/~derhannes/12/regimes-in-history-worldwide/#/

Each bar is stuck to the next bar, there is no space (due to the dataset) and that makes it quite hard to read the different blocks individually.
Additionally having the hover box only on the edges it’s impossible to know if I see the info for the ending box or the one of the starting box. Is there any way to have the hover box working in the whole box area? And is it possible to highlight the bar if you hover over it?

Thanks for your help! :slight_smile:

Ah, one more thing, having a legend on top or on the bottom would be great. Is there any way to place a legend other than on the right side (which also doesn’t work so smoothly)?

@derhannes

Here https://plot.ly/~empet/14945 you can find a method to round a rectangle corners. In your case a rectangle has mixed coordinates for its corners (one of float type and another a datetime). Hence you should transform the code in the above Jupyter Notebook to work with datetimes, too.

Legend position is presented here https://plot.ly/python/legend/.

1 Like

Wow amazing, thanks! I’ll try it right away.

This is an old discussion but I just saw it referenced in https://github.com/plotly/plotly.js/issues/2196 - FWIW the double-shape solution you ended up with I believe you only needed because of the M steps between the Q rounded corners and the L straight edges, which causes the SVG engine to draw the corners and edges each as separate shapes. Take those out and you get the simple filled shape you want https://codepen.io/alexcjohnson/pen/dErOaK?editors=0010

1 Like

@alexjohnson

What a simple path definition!!! Thanks for pointing it out. I updated the initial notebook [https://plot.ly/~empet/14945 for interested users.

Thank you all for the great ideas in this thread.
Any idea how to add rounded corners to Plotly Express px.timeline gantt charts?
Like this:

fig_model = px.timeline(df, x_start="Start", x_end="End", y="Machine", facet_row="Source",
                            color="Acronym")

Have tried adding the path from https://codepen.io/alexcjohnson/pen/dErOaK?editors=0010 to fig_model.update_shapes() but this seems to add a different layer to the gantt chart:

    ply_shapes = {}
    for i in range(1, len(df)):
        ply_shapes['shape_' + str(i)] = go.layout.Shape(type="line",
                                                        x0=df['Start'].iloc[i],
                                                        y0=df['Machine'].iloc[i - 1],
                                                        x1=df['End'].iloc[i],
                                                        y1=df['Machine'].iloc[i - 1],

                                                        )
    lst_shapes = list(ply_shapes.values())
    fig_model.update_layout(shapes=lst_shapes)

Any way to change shapes of bar charts within the px.timeline figure?