Hiii,
I want to create the chart below
can you please help on this.
Thanks,
sunil
The way I’d approach making a graph like this would be using scatter plot with custom tick values
(for example, you can set a y value of 0 to show as Bulgaria).
Plotly supports UNIX time conversion to a readable date, so you could look into that.
Visually, you’d make the width of the lines super big to make them look like bars.
So each horizontal bar would be 1 trace with a constant y value, and for x values it’d be just 2 points representing the beginning/end of the time period.
To achieve the semi circle (I’m not sure why they’re useful…?), you’d have huge markers as well and you can set their colors individually. Markers appear over lines by default, so to make them semi circles you’d overlay another trace on top without the marker. My approach would be to have one trace with just markers (mode: ‘markers’), and another trace with just lines (mode: ‘lines’) and overlay them.
Unfortunately, I’m unable to reproduce the semi circles by themselves, the closest I can come to it is through use of gradients.
Here’s a quick demonstration. https://codepen.io/p1ho/pen/KGgEKV
I hope this is helpful to you.
3 Likes
Thanks for help.It is working fine for me.@P1ho
I have another future like on hover points we need to add customize tooltip 
can you help out this…
I think Plotly’s native onhover tooltips can be very limited when it comes to customization.
To achieve something as custom as yours, instead of trying to modify Plotly’s tooltips, I’d disable them and make our own (which we’ll have css styling freedom over), and combine Plotly’s on-plotly-hover event, and trace’s custom data to generate and update the tooltip.
I can try to throw a pen together later, but that’s the gist of the idea.
yah sure… thanks**@p1ho**
for your information.I also tried to customize tooltip by using br/ ,but am unable apply css for that…
Yes, <br> can work for basic text formatting in plotly. But for example, if you want to have a column for Image where I assume you want to show the flag of the country, that’s beyond Plotly’s capabilities, I believe.
Yes exactly what you thought is correct, i need place country flag…@p1ho
Then I’d try with a self-implementation of a custom tooltip.
There will be resources and example elsewhere about how to build such things, but I think going down that route of discussion would be beyond the scope of this forum.