'Turn plotly button a different color on click

I added a new button in my plotly modeBar but I want it to stay a different color when it is clicked on. To show a change in "activeness," so when you click on it, it changes color and shows that it is active and when you click again it gets disabled and goes back to the default color. I am using reactJs.

javascript reactjs

Solution 1:^[1]

you can do something like this

const COLORS = ['black', 'white', 'orange', 'red', 'purple'];
const DEFAULT = "gray";
ChangeColor = () => {
    let rand_color = Math.floor(Math.random()*COLORS.length);
// isDisable should be a state of type boolean set to false by default
if(!isDisable){
   this.setState({ button_color: COLORS[rand_color] })
}else {
   this.setState({ button_color: DEFAULT })
}

}

hope this might help you.

Solution 2:^[2]

There is a param 'toggle' for Plotly modeBar buttons, here is an example

{
    modeBarButtonsToAdd: [{
        name: 'New custom button',
        icon: Plotly.Icons.movie,
        click: () => console.log('something happened'),
        toggle: true // The icon color will change according to the activeness
      }]
}

Tested with Plotly 1.57.1

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Husnain Tariq
Solution 2	PestoP

'Turn plotly button a different color on click

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]