# Hover to control a subplot

**URL:** <https://community.plotly.com/t/hover-to-control-a-subplot/68876>\
**Category:** Dash Python\
**Created:** [October 13, 2022, 4:24pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876 "2022-10-13T16:24:49Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![majudd](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/majudd/32/29768_2.png) [@majudd](https://community.plotly.com/u/majudd)\
**Post date:** [October 13, 2022, 4:24pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/1 "2022-10-13T16:24:49Z")

</div>

I have added a subplot which is controlled by Hover in my main plot. It works great except for the fact that Hover is constantly on. So for example, I Hover over the first plot and stop somewhere to see what the subplot now looks like. I then want to zoom into the subplot, which requires moving my mouse down to it. However, the process of moving the mouse changes the location on the first plot where Hover is activated, changing the subplot! I would like to only activate Hover with a right click of the mouse. Is this possible?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 13, 2022, 4:34pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/2 "2022-10-13T16:34:53Z")

</div>

Right click being held down, or right click to toggle?

You could use a click instead of the hover for the subplot. Or even a selectedData for it. These might be easier to implement and giving you a lot more control. And maybe a little more intuitive for the user?

Example:  
User sees chart, hovers over the data, “that’s interesting. I want to look further…” _ **click** _ … “oh that’s cool!”

With selecedData, you can allow for multiple selections, but its not available on every chart.

---

<div class="post-metadata">

**Author:** ![majudd](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/majudd/32/29768_2.png) [@majudd](https://community.plotly.com/u/majudd)\
**Post date:** [October 13, 2022, 7:02pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/3 "2022-10-13T19:02:04Z")

</div>

Thanks so much! I used clickData and it gave me what I needed. Can I add a submit button to my Dashboard when I need to be over the first plot to hit click for the second plot? I need a situation where the submit button controls all of the Dashboard selections, but does not control the mouse click on the main plot.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 13, 2022, 7:16pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/4 "2022-10-13T19:16:31Z")

</div>

@majudd,

Yes, you can add a button that toggles on and off. Then inside the callback for the clickData, just pull the state of the button as to whether or not you do anything with the data.

---

<div class="post-metadata">

**Author:** ![majudd](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/majudd/32/29768_2.png) [@majudd](https://community.plotly.com/u/majudd)\
**Post date:** [October 13, 2022, 7:41pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/5 "2022-10-13T19:41:37Z")

</div>

Thanks so much! I made it work. I have everything entered as State except for clickData which is entered as Input, so clickData works the minute I click the mouse, but everything else waits until I hit the Submit button. Perfect!!

---

<div class="post-metadata">

**Author:** ![majudd](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/majudd/32/29768_2.png) [@majudd](https://community.plotly.com/u/majudd)\
**Post date:** [October 13, 2022, 8:59pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/6 "2022-10-13T20:59:54Z")

</div>

Now I have a second question. How do I set things up so that the second graph, the subplot, is cleared every time the Submit button is used? After the Submit button is used, the primary graph will change. I want the subplot to clear at this point until I click in the primary graph again.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 13, 2022, 9:02pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/7 "2022-10-13T21:02:25Z")

</div>

Can you hide the subplot when it is not used?

---

<div class="post-metadata">

**Author:** ![majudd](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/majudd/32/29768_2.png) [@majudd](https://community.plotly.com/u/majudd)\
**Post date:** [October 13, 2022, 9:07pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/8 "2022-10-13T21:07:05Z")

</div>

When I first open the Dashboard, the subplot is there but empty. I want to empty it again every time I hit the Submit button. Because otherwise the subplot shown does not work with the new main plot, until the main plot is clicked in again.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 13, 2022, 9:10pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/9 "2022-10-13T21:10:56Z")

</div>

Add a secondary input of the button click with the clickedData. If the button click is what triggered the callback, then return an empty figure.

> **[Determining Which Callback Input Changed | Dash for Python Documentation |...](https://dash.plotly.com/determining-which-callback-input-changed)**
>
> Understanding callback context and determining which input triggered a callback

---

<div class="post-metadata">

**Author:** ![majudd](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/majudd/32/29768_2.png) [@majudd](https://community.plotly.com/u/majudd)\
**Post date:** [October 14, 2022, 4:10pm UTC](https://community.plotly.com/t/hover-to-control-a-subplot/68876/10 "2022-10-14T16:10:44Z")

</div>

Just what I needed, thanks!
