---

name: Add Buttons to ModeBar

plot_url: https://codepen.io/plotly/embed/gObEmLr/?height=450&theme-id=15263&default-tab=result

language: plotly_js

suite: configuration

order: 5.7

sitemap: false

arrangement: horizontal

markdown_content: |

The following example shows how to add a button to your modebar, either using one of the [Plotly icons](https://github.com/plotly/plotly.js/blob/master/src/fonts/ploticon.js) or an [arbitrary icon](https://fontawesome.com/icons?d=gallery&m=free) with a custom behaviour.

---

var icon1 = {

'width': 500,

'height': 600,

'path':'M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z'}

var colors = ['green', 'red', 'blue']

var data = [{

mode: 'lines',

y: [2, 1, 2],

line: {color: colors[0], width: 3, shape: 'spline'}}]

var layout = {

title: 'add mode bar button with custom icon',

modebardisplay: false}

var config = {

modeBarButtonsToAdd: [

{

name: 'color toggler',

icon: icon1,

click: function(gd) {

var newColor = colors[Math.floor(3 * Math.random())]

Plotly.restyle(gd, 'line.color', newColor)

}},

{

name: 'button1',

icon: Plotly.Icons.pencil,

direction: 'up',

click: function(gd) {alert('button1')

}}],

modeBarButtonsToRemove: ['pan2d','select2d','lasso2d','resetScale2d','zoomOut2d']}

Plotly.newPlot('graph', data, layout, config)

---

name: Display the Modebar

plot_url: https://codepen.io/plotly/embed/jbMvLq/?height=450&theme-id=15263&default-tab=result

language: plotly_js

suite: configuration

order: 4

sitemap: false

arrangement: horizontal

markdown_content: |

When you hover over the top right of a Plotly graph, a bar appears which we call it `modeBar`. To display or hide this modebar set `displayModeBar` in `config` to `true` or `false`.

---

var data = {

y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'],

x: [90, 40, 60, 80, 75, 92, 87, 73],

type: 'bar',

orientation: 'h'

};

var layout = {title: 'Always Display the Modebar', showlegend: false};

Plotly.newPlot('myDiv', data, layout, {displayModeBar: true});

---

name: Remove ModeBar Button

plot_url: https://codepen.io/plotly/embed/OQyEaP/?height=450&theme-id=15263&default-tab=result

language: plotly_js

suite: configuration

order: 5.5

sitemap: false

arrangement: horizontal

markdown_content: |

To delete buttons from the modebar, put buttons name in an array of string and pass it to 'modeBarButtonsToRemove' in config. Here is all the buttons' names:

<ul>

<li>- 2D: zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d</li>

<li>- 3D: zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d</li>

<li>- Cartesian: hoverClosestCartesian, hoverCompareCartesian</li>

<li>- Geo: zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo</li>

<li>- Other: hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews, "toImage", "sendDataToCloud", "toggleSpikelines", “resetViewMapbox"</li>

</ul>

---

var data = {

x:['trees', 'flowers', 'hedges'],

y: [90, 130, 40],

type: 'bar'};

var layout = {

title: 'Remove Modebar Buttons',

showlegend: false};

Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']});