Click on non chart area

plotly.js
1

Hi
First time post. I’ve tried to search but couldn’t find the answer. I’m new to plotly (and JS in general).
Is there a way to detect click on non chart area (eg. on chart title)? If user clicks the chart title, I want to display a dialog to allow user change the title.
All examples that I’ve found only demonstrate how to detect click on the actual chart area.
Thanks

1 Like
2

Hello,
I don’t solve your problem. But I tried it and want to tell you my approach.
I looked with the dom inspector into the svg-container to find the title ( and if it has a class or id). It lies in the following classes hierarchy:
svg-container->main-svg(the second)->infolayer->g-gtitle->gtitle

If you want to attach an onClick listener e.g. with jquery your code should looks like that:

var title = $(".gtitle");
title.click(function(){
  alert("Title was clicked!");
});

If you have multiple plots you should use a more detailed selector on jquery so that every title can have its own listener. For example this:
var title = $("#myDiv .g-gtitle");

The problem with that is, that some other layers lay over this gtitle-element, so the mouse click not reach on the title. At the moment I have no time and no idea. Btw: I think plotly currently not support by its own a onClick event for title.
Maybe the approach helps you to solve your problem…

To test if the onClick-handler is really attached you can add this line:
title.click();
This “fakes” a mouseclick on the given element.

3

Thanks for the suggestion. I’ll give it a try.

4

Hello,

Have you found a solution to that one yet ?