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?
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)?
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.
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