Black Lives Matter. Please consider donating to Campaign Zero's mission of ending police violence in America.
https://www.joincampaignzero.org

How to trigger a click on the ModeBar buttons or access the ModeBar on a graph

I’m having trouble accessing the ModeBar object on a graph in order to set the default hoverMode to hoverClosestCartesian or closest or whatever it should be.

Also, targeting the link using JS to trigger a click once the graph has loaded doesn’t do anything.

Can someone point me in the right direction?

I’m not sure what you mean by accessing the ModeBar object. Would you mind sharing a code snippet?

Hi Etienne,

I don’t actually have a working code snippet to share but here’s what I’m trying to do.

I’ve created a graph using Plotly.newPlot(theGraph, [graphData], layout, graphSettings); where the graphSettings object has removed the 'hoverCompareCartesian' button from the ModeBar. However this actual hover setting is still being applied. It’s the default.

So what I want to do here is make the default hover setting 'hoverClosestCartesian' and have that button pre-selected (and un-toggle-able, which it already is)

There’s no ModeBar ‘object’ once the JS has all compiled though, it’s included in the build somewhere (or at least I can’t seem to debug to a point where I can find it!) There’s no Plotly.Plot.ModeBar or Plotly.ModeBar(theGraph) or simply theGraph.ModeBar or any combination of these that I can find. The index.js file makes me think this is simply used in the initialisation of the Plotly object and has no public API.

I thought a workaround would be simply wait for the graph to load, find the button in the DOM and trigger a click on it. However a scripted click on the button does nothing to it’s state. It’s as if you’ve not clicked it. Clicking with the mouse does work.

As it stands I’ve reinstated the compare button to the graph for the time-being.

By default hover setting, do you mean like: https://plot.ly/javascript/reference/#layout-hovermode

Modebar buttons aren’t meant to initialize a graph. They are just a way to interact and change a graph’s 'data' and 'layout'.

Ha! That’s exactly what I was looking for.

Thanks so much!