Ok, here is another one: I’d like to change the color of a bar in a bar chart plot (actually, I’d like to gray out all other bars) when clicking and holding the click, then go back to “normal” when releasing the click. However, it seems that plotly does not have a mousedown event. The solution suggested here also does not work, as I’d need information of the bar that is clicked to be able to selectively change the color. Is there a way to achieve this?
Here I have an example of how I captured the mousemove event of the bars, but to perform other actions, it may be useful to you.
Oh, I see, you create the events yourself! That’s very interesting! It works if I change mousemove to mousedown or mouseup, I just have to check how to trigger both at the same time. Thank you!
Aha! I was trying something similar, but with the dispatchEvent, like
bars[i].onmousedown = e => {
if(layer._fullLayout._lasthover)
layer._fullLayout._lasthover.dispatchEvent(new MouseEvent("mousedown", e))
}
bars[i].onmouseup = e => {
if(layer._fullLayout._lasthover)
layer._fullLayout._lasthover.dispatchEvent(new MouseEvent("mouseup", e))
}
and for some reason (I don’t really understand), that only triggers the mousedown event - regardless of the order. But it seems I don’t need that at all! Thanks!
I have finally time to go back to this. I have changed a little the implementation to be able to move the mouse out of the hovering while pressing the button:
https://codepen.io/filipesmg/pen/GggKqBj
That works fine on codepen, but when I try to do it on my code, the bars are listed correctly (although it bars also include the ones in the rangeslider in my case, when I use it), but the mouse events on it are not being triggered.
I’m using pretty much the same code:
graphDiv[0]
.on("plotly_hover", highlight)
.on("plotly_unhover", unhighlight)
.on("plotly_relayout", data => { // Trigerring mouseup and mousedown events
console.log("relayout triggered!")
let bars = document.querySelectorAll(".barlayer .bars .points .point path")
for(let i = 0; i < bars.length; i++) {
bars[i].onmousemove = e => {
console.log("Mousemove!")
if(graphDiv[0]._fullLayout._lasthover)
graphDiv[0]._fullLayout._lasthover.dispatchEvent(new MouseEvent("mousemove", e))
}
bars[i].onmouseout = e => {
console.log("Mouseout!")
if(graphDiv[0]._fullLayout._lasthover)
graphDiv[0]._fullLayout._lasthover.dispatchEvent(new MouseEvent("mouseout", e))
}
bars[i].onmousedown = e => {
console.log("Mousedown!")
// grayOthers(traces)
// Plotly.update(self.id, traces, layout);
}
bars[i].onmouseup = e => {
console.log("Mouseup!")
// resetColors(traces)
// Plotly.update(self.id, traces, layout);
}
}
})
Any idea on what may be the reason why?
One thing I noticed is that when I hover over the bar in codepen, I see the mouse arrow, while on mine, I see the crosshair. Maybe this is related? I’m using Plotly 3.0.0, and codepen uses now 3.0.1, so I assume this is not the issue.