Round border of hover box

📊 Plotly Python
1

Is it possible to change the shape of the hover text box? For example, round the edges of it.

2

Not at this time, no.

3

Hi,
bit a late for a reply, but for anyone interested, it is possible, at least with Dash.
Hacky way though.

For example, if you have plotly Dash graph with id='bar-chart' and you want that the hover box of that graph has rounded corners, you can add the following to the custom CSS file (located in assets/ folder):

/* update hover box corners to be rounded in bar-chart */
#bar-chart .hoverlayer .bg {
    rx: 3;
    shape-rendering: auto;
}

rx attribute changes how much the corners are rounded, while shape-rendering the way of how hover-box is rendered (as it is SVG shape). Second attribute is not required, however, with default shape-rendering value crispEdges, hover box is rendered in a way that you can see pixelated corners, which doesn’t seem very professional (rendering is, however, probably faster, but I did not notice any performance issues).

I tried just on a bar chart, but I believe the same/similar settings would also work with other types of graphs.

Here you can see the results:
image

Cheers

3 Likes