Remove options from the Hover Toolbar?

plotly.js
1

Hello, is it possible to remove options from the toolbar that Plotly shows when you hover over the chart? Alternatively, is it possible to suppress the toolbar entirely?

2

EDIT: See billythekid’s answer

It is not possible to remove specific options on the toolbar (plotly calls it the modebar) at the moment.

But, you can hide the modebar entirely using the displayModeBar config options. More info here.

1 Like
3

You can remove buttons from the modebar using modeBarButtonsToRemove config setting. Set to an array of button names (find the names of the buttons on this github page)

for example {modeBarButtonsToRemove: ['sendDataToCloud','hoverCompareCartesian']}

You can find all the configuration options (and their default plotly.js values) here in the modules.exports object.

6 Likes
4

how to do this with R ? anybody know? help me

5

You might want to look at: [R] Set plotly javascript parameters in R

7

@billythekid
Where do I have to put that line of code, in the layout part?
On another page, to remove the Plotly logo they said one can just set ‘displaylogo’ to false, or use ‘modeBarButtonsToRemove’ to remove Buttons from the bar (in plot_config.js)
I downloaded ‘plotly-latest.min.js’ and now don’t know how to use the config file in my Project.
Thanks in advance!

8

@Schorry92 EDIT: please see etienne’s fix below

[spoiler]It appears that this is broken now, I’ve made a pen as an example though: http://codepen.io/billythekid/pen/JbMeNd?editors=0010

Adding buttons or removing buttons seems to no longer work. Perhaps there’s been a version update since I last used this about a year ago? It may be that if you use a previous version it’ll work or someone else here may be better placed to advise. Sorry I can’t be of more help.[/spoiler]

9

Your codepen is using the pre-open-source plotly.js. No wonder it’s not working.

Here’s a working version http://codepen.io/etpinard/pen/gLoNgR

1 Like
10

that’s brilliant thanks, I just forked one of the example ones to quickly throw that together. Presumed it’d be on the latest version, lol.

11

Here’s the Plotly.js configuration I use to remove most of the buttons from the Modebar (Hover Toolbar) I don’t use:

     //  Modebar Buttons names at https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js
     //  - sendDataToCloud 
     //  - (2D): zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d
     //  - (Cartesian): hoverClosestCartesian, hoverCompareCartesian 
     //  - (3D): zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d
     //  - (Geo): zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo
     //  - hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews 

     // hide the modebar (hover bar) buttons, plotly logo. show plotly tooltips
     var defaultPlotlyConfiguration = { modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d'], displaylogo: false, showTips: true };
    // display the plot in divId HTML element
    Plotly.newPlot(divId, plotData, plotLayout, defaultPlotlyConfiguration);
4 Likes
13

Found it really useful!

Found this Codepen link for example on how to hide certain display parameters based on your suggestion to use modeBarButtonsToRemove.

14

Use (displayModeBar) in params to remove bar;

var chartPizza = [{
values: [data.totalPoints, data.noTotalPoints],
labels: [‘Inspeções completas’, ‘Inspeções incompletas’],
type: ‘pie’,
hoverinfo: ‘label+value’
}];

var layout = {
height: 400,
width: 500,
title: ‘Pizza!!!’
};

Plotly.newPlot(‘chart’, chartPizza, layout, {displayModeBar: false});

2 Likes
15

Here’s the plotly.js buttons as JSON:

[
  "zoom2d", "pan2d", "select2d", "lasso2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d",
  "hoverClosestCartesian", "hoverCompareCartesian",
  "zoom3d", "pan3d", "resetCameraDefault3d", "resetCameraLastSave3d", "hoverClosest3d",
  "orbitRotation", "tableRotation",
  "zoomInGeo", "zoomOutGeo", "resetGeo", "hoverClosestGeo",
  "toImage",
  "sendDataToCloud",
  "hoverClosestGl2d",
  "hoverClosestPie",
  "toggleHover",
  "resetViews",
  "toggleSpikelines",
  "resetViewMapbox"
]

How that was generated via node.js:

window = {} // shim window
buttons = Object.keys(require('plotly.js/src/components/modebar/buttons.js'))

You can get each set of buttons by doing something like

buttons.filter((name) => name.match(/2d/))
1 Like
16

Does anyone know how to make this work with the react-plotly library? I’ve tried adding this attribute to the config, the layout, and as a prop on the component, but none of these have worked, the modebar is always there.

17

Found it, looked at the code. Here’s the solution:

render() {

    const config = { displayModeBar: false }
    const data = { ... something here ... }

    return <Plot config={config} data={data}/>
}

Now, does anyone know how to change the default interaction type? I’m really angry at whoever it is that thought zoom should be the default.
[edit] answered my own question here [/edit]

18

Just in case anyone wants to do the same without using the react-plotly module:

const config = { displayModeBar: false },
      plotDiv = document.querySelector('#myDiv'),
      traces = [ */your traces go here /* ];

Plotly.newPlot(plotDiv, traces, layout, config);
19

This is not working properly of my Windows 10. I want to Fix Windows 10 Automatic Repair. How can I do this?

20

For reference, here is our documentation page covering the config object which can be passed into Plotly.newPlot: https://plot.ly/javascript/configuration-options/

21

Is that also documented for Python somewhere?