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

name: Never Display The Modebar

markdown_content: |

When users hover over a figure generated with `plotly.js`, a `modebar` appears in the top-right of the figure. This presents users with several options for interacting with the figure.

By default, the `modebar` is only visible while the user is hovering over the chart. If you would like the `modebar` to never be visible, then set the `displayModeBar` attribute in the `config` of your figure to `false`.

name: Customize The `Edit Chart` Link Text

var data = [{

z: [[0, 1, 2, 3, 4, 5, 6],

[1, 9, 4, 7, 5, 2, 4],

[2, 4, 2, 1, 6, 9, 3]],

type: 'heatmap'}]

var layout = {title: 'Customize The Edit Chart Link Text'}

Plotly.newPlot('myDiv', data, layout, {showLink: true, linkText: 'This text is custom!'})

name: Display the `Edit Chart` Link

<script src="https://cdn.plot.ly/plotly-locale-fr-latest.js"></script>

name: Editable Mode

markdown_content: |

In editable mode, users can edit the chart title, axis labels and trace names in the legend.

var layout = {title: 'Click Here<br>to Edit Chart Title'};

title: 'Responsive to window size!',

---

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: '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('myDiv', data, layout, config)

---

name: Force The Modebar to Always Be Visible

language: plotly_js

suite: configuration

order: 4

sitemap: false

arrangement: horizontal

markdown_content: |

When users hover over a figure generated with `plotly.js`, a `modebar` appears in the top-right of the figure. This presents users with several options for interacting with the figure.

By default, the `modebar` is only visible while the user is hovering over the chart. If you would like the `modebar` to always be visible regardless of whether or not the user is currently hovering over the figure, set the `displayModeBar` attribute in the `config` of your figure to `true`.

---

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 Buttons

language: plotly_js

suite: configuration

order: 5.5

sitemap: false

arrangement: horizontal

markdown_content: |

To delete buttons from the modebar, pass an array of strings containing the names of the buttons you want to remove to the `modeBarButtonsToRemove` attribute in the figure's configuration object. Note that different chart types have different default modebars. The following is a list of all the modebar buttons and the chart types they are associated with:

<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']})