Plotly is a free and open-source library that provides extensive support for a wide range of plots.
However, you will notice that Plotly includes the modebar on the top-right corner of every plot. Although this can be beneficial for quick actions such as exporting the plot to an image file, it can lead also to poor navigation and visibility especially on smaller displays.
Luckily, Plotly allows us to remove the modebar or specific elements of the modebar as we see fit. In this tutorial, we will learn how we can customize the modebar in Plotly using the layout parameter.
Plotly Chart
Let us start by illustrating the modebar in Plotly Figures. In our example, we will create a simple line plot using Plotly.js.
Start by creating a HTML document and call it line_plot.html.
We can then add HTML boilerplate code and add the title and Plotly.js library. An example code is as shown below:
Once created, navigate to the body of the HTML document and create a div element. Give it an id of “myDiv”. This will allow us to use the div element and plot the figure.
An example code is as shown:
Finally, open a script tag and add the code as shown below:
x: [0, 1, 2, 3, 4],
y: [1, 5, 3, 7, 5],
mode: "lines+markers",
type: "scatter",
};
var trace2 = {
x: [1, 2, 3, 4, 5],
y: [4, 0, 4, 6, 8],
mode: "lines+markers",
type: "scatter",
};
var data = [trace1, trace2];
Plotly.newPlot("myDiv", data);
In the example above, we create a simple line graph using sample data. The code above should result in the figure shown below:
Note that the plot above includes the modebar by default. Let us now discuss how we can disable the entire or elements of the modebar.
Plotly Disable Modebar
To remove the entire modebar from a specific plot, we can use the layout parameter. An example code is as shown below:
var layout = {
title: "Line Graph without modebar"
}
Plotly.newPlot("myDiv", data, layout, {displayModeBar: false});
………………..code truncated……………….
In the example above, we start by defining the layout object which holds the properties we wish to customize. In our example, we set the title of the figure using the title property.
Next, we set the displaModeBar to false in the newPlot() function. The code above should result in the figure as shown below:
You will notice that the modebar does not appear even when we hover.
Plotly Remove Plotly Logo
In some cases, you may want to preserve the modebar but remove the “Produced with Plotly” logo from it.
For that, we can set the displaylogo property to false as shown:
If we run the code above, we should see the figure with the modebar but the logo is hidden:
As we can see, the figure no longer contains the Produced with Plotly logo.
Plotly Remove Modebar Buttons
You can pass the names of the buttons you wish to remove as an array to the modeBarButtonsToRemove property to remove specific buttons from the modebar.
Consider the figure below before removing the buttons.
Here, we can see the modebar has all the buttons
To remove the ‘toImage’, zoom, zoom in, and zoom out buttons. We can run the code as:
In the example above, we remove the toImage, zoom, zoom in, and zoom out buttons. The resulting figure is as shown:
As we can see, the specified buttons are unavailable from the modebar.
Conclusion
In this tutorial, you learned how to customize the modebar in Plotly Figures. We also covered how to hide and show the modebar, remove specific buttons from the modebar, and how to remove the “Produced with Plotly” logo.
