Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Click on non chart area

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

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.

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