2020-01-24-add-button-to-modebar.html

---
name: Add Buttons to ModeBar
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 by 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: {
    text: 'add mode bar button with custom icon'
  }
}

var config = {
  displayModeBar: true,
  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('myDiv', data, layout, config)