Disable hover in Plotly.js

Question

Trying to create a wind rose in Plotly; the actual chart displays fine, but I don't want either of the hover tooltips. hoverinfo:none doesn't seem to work; what am I doing wrong?

var json = 
{"RequestID":null,"AppCode":"0","AppMessage":"OK","Meta":null,"Data":{"Series":[{"r":[23.658536585365852,19.878048780487806,7.8048780487804876,5.8536585365853666,13.292682926829269,6.463414634146341,4.024390243902439,19.024390243902438],"t":["0","45","90","135","180","225","270","315"],"name":"\u003e 25","marker":{"color":"#FF0000"},"type":"area","hoverinfo":"none"},{"r":[23.658536585365852,19.878048780487806,7.8048780487804876,5.8536585365853666,13.292682926829269,6.463414634146341,4.024390243902439,19.024390243902438],"t":["0","45","90","135","180","225","270","315"],"name":"10 - 25","marker":{"color":"#ED850C"},"type":"area","hoverinfo":"none"},{"r":[21.707317073170728,18.414634146341463,7.0731707317073171,5.7317073170731714,12.804878048780488,5.975609756097561,3.7804878048780486,17.926829268292682],"t":["0","45","90","135","180","225","270","315"],"name":"5 - 10","marker":{"color":"#3F3F3F"},"type":"area","hoverinfo":"none"},{"r":[19.756097560975608,17.4390243902439,6.4634146341463419,5.1219512195121961,11.585365853658537,5.1219512195121952,3.4146341463414633,15.487804878048781],"t":["0","45","90","135","180","225","270","315"],"name":"2 - 5","marker":{"color":"#2A4354"},"type":"area","hoverinfo":"none"},{"r":[17.073170731707314,13.780487804878048,5.3658536585365857,4.6341463414634152,10,3.9024390243902443,3.0487804878048781,12.073170731707318],"t":["0","45","90","135","180","225","270","315"],"name":"1 - 2","marker":{"color":"#5486A9"},"type":"area","hoverinfo":"none"},{"r":[11.829268292682926,9.2682926829268286,3.2926829268292686,2.8048780487804881,7.4390243902439019,3.1707317073170733,2.1951219512195119,8.536585365853659],"t":["0","45","90","135","180","225","270","315"],"name":"\u003c 1","marker":{"color":"#68A7D3"},"type":"area","hoverinfo":"none"}]}};

var data = json.Data.Series;

var layout = {
  title: 'Wind Speed Distribution in Laurel, NE',
  font: {size: 11},
  legend: {font: {size: 16}},
  radialaxis: {ticksuffix: '%'},
  orientation: 270,
  hovermode: 'none',
  yaxis: {
  }
};

Plotly.newPlot('myDiv', data, layout);

Working example: https://jsfiddle.net/whelkaholism/yyfoyd9h/4/

The Code you provide seems to be exactly what you provided in the jsfiddle and it is not showing an hover tooltips. So I can´t see what your problem here is? — IIIIIIIIIIIIIIIIIIIIII
– IIIIIIIIIIIIIIIIIIIIII, Commented Mar 8, 2016 at 5:53
Hmmm, it's showing them for me. A coloured call out with the r and t values in and a small white tooltip showing the percentage value. I've actually solved this by CSS styling the SVG classes now, so I'll add my own answer when I get a sec. — Whelkaholism
– Whelkaholism, Commented Mar 8, 2016 at 9:55
Showing them for me too. Try posting on the plotly forum. They are very responsive. — abalter
– abalter, Commented Apr 10, 2016 at 4:35

Caleb Jay · Accepted Answer · 2025-07-08 12:01:17Z

7

You have to add hovermode: false to disable hover.

Try:

var layout = {
  title: 'Wind Speed Distribution in Laurel, NE',
  font: {size: 11},
  legend: {font: {size: 16}},
  radialaxis: {ticksuffix: '%'},
  orientation: 270,
  hovermode: false,
  yaxis: {
  }
};

The accepted values for hovermode are "x", "y", "closest", false

edited Jul 8 at 12:01

Caleb Jay

2,2094 gold badges43 silver badges77 bronze badges

answered Nov 23, 2016 at 9:52

laaposto

12.2k15 gold badges60 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arnaud P Over a year ago

Do you mind if I edit !1 to false ? Would be more understandable IMO

Collectives™ on Stack Overflow

Disable hover in Plotly.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related