Modebarbutton toggle - off by default

plotly.js
1

Hi all,

I can’t really figure it out with the help of the documentation:

is there a way to make a custom modebarbutton to be a toggle with the default value being off? I’d like to indicate visually whether the button is off or on, but no combination of attr, val and toggle let me do that. Best I can get is to get it to become a toggle but with a default being turned on (color of the icon being darker).

modeBarButtonsToAdd: [
      {
        name: 'Toggle Hover Synchronisation',
        icon: mouse,
        click: toggleHover,
        attr: false,
        val: 'off',
        toggle: true,
      },
    ],

Thanks

2

There doesn’t seem to be a way to do that directly.

I set it like that to have the toggle option working (‘on’ by default):
modeBarButtonsToAdd: [
{
name: ‘Toggle Hover Synchronisation’,
icon: mouse,
click: toggleHover,
attr: ‘myAttr’,
toggle: true,
},
],

And then I had to remove the ‘active’ class on that button so it appears ‘off’ by default :
const myBtn = document.querySelector([‘data-attr=myAttr’]);
myBtn?.classList.remove(‘active’);

And after that it displays and toggles as I want.