Part 1 of 3: Controlling Plotly in React – Control the Modebar

How to take control of Plotly’s modebar buttons with a single, straightforward React hook.

Are you gearing up to write a new data app?
Does your business contain critically huge amounts of data that are interpreted best when visualized?
Do you want to make your data points interactive for the user without writing a ton of code?

Consider using plotly.


Ploty is a popular, feature-rich solution for writing data visualization apps with relatively small amounts of code. Scatter plot charts, bar charts, 3D charts, maps, and much more are all possible with plotly.

In this article…

I’ll be showing you how to control plotly’s modebar buttons with a simple React hook. We’ll control them by selecting their base anchor elements in the HTML, then creating buttons that trigger a click for those elements

You should already have a basic understanding of:

  • Javascript
  • Typescript (this app will be in Typescript!)
  • Plotly in react
  • React and React hooks

Steps in creating this hook to control plotly’s modebar:

  • Create the app in
  • Import dependencies and starting code
  • Create new file for hook
  • Extract types
  • Write the hook logic
  • Use hook in main app
  • Hide existing plotly modebar

Create the app in

Begin by going to Click on the “Create” button at the top, then select “React Typescript”

Import dependencies and starting code:

In the “Dependencies” section on the left, import the following dependencies:

  • @types/react-plotly.js
  • Plotly.js
  • React-plotly.js

Your dependency list should look like this (the other dependencies should already be installed):

Go to App.tsx. Delete its contents and paste in the following starter code:
import Plot from "react-plotly.js";
import "./styles.css";
const count = 50;
const getArray = () => Array(count).fill(1);
const getRandomNumber = (max: number) => Math.floor(Math.random() * max);
const startingNumbers = getArray().map((_, i) => i);
const randomNumbers = getArray().map(() => getRandomNumber(count));
export default function App() {
 return (
   <div className="App">
           x: startingNumbers,
           y: randomNumbers,
           mode: "markers"
         title: "Plotly App",
         xaxis: { range: [-5, count] },
         yaxis: { range: [-5, count] },
         dragmode: "lasso",
         uirevision: 1
You should then see a basic Plot generated in the preview window!

Create new file for hook

Right click on the “src” directory on the left and click on Create File. Call the file “usePlotlyModebar.ts”

Extract types

At the top of the usePlotlyModebar.ts file, paste the following code

// these strings are the datatitles for plotly's modebar <a> elements
export const modebarActions = [
 "Box Select",
 "Lasso Select",
 "Download plot as a png",
 "Zoom out",
 "Zoom in"
] as const;
type ModebarAction = typeof modebarActions[number];

Wait! Where did these strings (“Pan”, “Box Select”, etc…) come from?

If you inspect the modebar element and expand down to the bottommost elements, you’ll see that the modebar buttons are anchor elements with unique data-titles. These strings are the data-titles for these anchor elements and we will use them to select these anchor elements and eventually click them.

Wait (again)! Why make a const and a type and not just a type?

You’ll notice I first make an array of strings (const modeBarActions) and then I make a type based on the strings in the array (type ModebarAction). So why didn’t I just make the type? It’s because I plan on iterating over each action string and you can’t do that with a type.

Write the hook logic

Underneath the code written in the previous step, write this hook:

export const usePlotlyModebar = () => {
 const triggerModebarButton = (action: ModebarAction) => {
   const anchorElement = document.querySelector<HTMLAnchorElement>(
 return { triggerModebarButton };

Explanation of code:

The hook contains a single method (triggerModebarButton) that receives a ModebarAction string. That string is used to select the unique modebar button based on the anchor’s data-title, which we then click.

Use hook in main app

In App.tsx, in the App component, import modebarActions and usePlotlyModebar then add the usePlotlyModebar hook in the first line of the component.

Next, in the return JSX before the plot, add the code that will return a button for each modebarAction:

import { modebarActions, usePlotlyModebar } from "./usePlotlyModebar";
// other code…
export default function App() {
 const { triggerModebarButton } = usePlotlyModebar();
 return (
   <div className="App">
     { => (
         style={{ marginRight: "2px" }}
         onClick={() => triggerModebarButton(action)}
{/* other code… */}

Hide existing plotly modebar

Finally, go to styles.css and add the following code. It will hide the existing plotly modebar so you won’t see both. And that’s it!

.modebar-container * {
 visibility: hidden;


Here’s a link to a finished codesandbox:

In the next article for this 3 part series on Controlling plotly in React, I’ll be showing you how to render fully custom annotations.


Part 1 of 3: Controlling Plotly in React – Control the Modebar
Part 2 of 3: Controlling Plotly in React – Fully Custom Annotations
Part 3 of 3: Controlling Plotly in React – Adding Custom Color Markers by Category

About Intertech

Intertech is a Software Development Consulting Firm that provides single and multiple turnkey software development teams, available on your schedule and configured to achieve success as defined by your requirements independently or in co-development with your team. Intertech teams combine proven full-stack, DevOps, Agile-experienced lead consultants with Delivery Management, User Experience, Software Development, and QA experts in Business Process Automation (BPA), Microservices, Client- and Server-Side Web Frameworks of multiple technologies, Custom Portal and Dashboard development, Cloud Integration and Migration (Azure and AWS), and so much more. Each Intertech employee leads with the soft skills necessary to explain complex concepts to stakeholders and team members alike and makes your business more efficient, your data more valuable, and your team better. In addition, Intertech is a trusted partner of more than 4000 satisfied customers and has a 99.70% “would recommend” rating.