# Use Plotly with touch interactions

**URL:** <https://community.plotly.com/t/use-plotly-with-touch-interactions/929>\
**Category:** plotly.js\
**Created:** [April 26, 2016, 3:02pm UTC](https://community.plotly.com/t/use-plotly-with-touch-interactions/929 "2016-04-26T15:02:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![threxx](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/threxx/32/237_2.png) [@threxx](https://community.plotly.com/u/threxx)\
**Post date:** [April 26, 2016, 3:02pm UTC](https://community.plotly.com/t/use-plotly-with-touch-interactions/929/1 "2016-04-26T15:02:39Z")

</div>

Hey,

Is there a possibility to use plotly with touch? So for example to pan the diagram with an iPad touch input?

Or does it work but not with AngularJS?

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [April 26, 2016, 3:08pm UTC](https://community.plotly.com/t/use-plotly-with-touch-interactions/929/2 "2016-04-26T15:08:49Z")

</div>

> [@threxx](#):
>
> Is there a possibility to use plotly with touch?

Not at the moment unfortunately.

I’m curious though. What kind of interactions are you thiking about?

---

<div class="post-metadata">

**Author:** ![threxx](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/threxx/32/237_2.png) [@threxx](https://community.plotly.com/u/threxx)\
**Post date:** [April 26, 2016, 3:11pm UTC](https://community.plotly.com/t/use-plotly-with-touch-interactions/929/3 "2016-04-26T15:11:40Z")

</div>

Hey, thanks for your fast response.

I want to create a pan only diagram and scroll through the data on a touch display. (e.g. to a specific point of time)

Any idea on how am I able to translate touch inputs to mouse events?

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [April 27, 2016, 1:58pm UTC](https://community.plotly.com/t/use-plotly-with-touch-interactions/929/4 "2016-04-27T13:58:26Z")

</div>

> [@threxx](#):
>
> I want to create a pan only diagram and scroll through the data on a touch display. (e.g. to a specific point of time)

That would be cool.

Unfortunately, I can’t think of robust way to implement this at the moment.

I created an issue [Add 'touch' handlers for panning on mobile devices · Issue #480 · plotly/plotly.js · GitHub](https://github.com/plotly/plotly.js/issues/480) to start a discussion about it among plotly.js developers.

Thanks for writing in.

---

<div class="post-metadata">

**Author:** ![Malina](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/malina/32/1556_2.png) [@Malina](https://community.plotly.com/u/Malina)\
**Post date:** [August 17, 2017, 3:56pm UTC](https://community.plotly.com/t/use-plotly-with-touch-interactions/929/5 "2017-08-17T15:56:56Z")

</div>

[This PR](https://github.com/plotly/plotly.js/pull/1804) correctly changed some of plotly’s behavior when the device does not have hover capabilities. When the device does not have hover, many interactions normally triggered by mouseover are now triggered by click. It’s relatively straightforward to intercept touch events and re-emit them as mouse events, here’s a [working CodePen example](https://codepen.io/MalinaKirn/pen/ZJXxyg) (interact with it in your mobile device). This should get you most of the way towards using touch in plotly.

Note that the `has-hover` package being used by plotly.js returns true for the Android emulator (and false for an Android device). Consequently, plotly will still listen for mouseover events on the Android emulator. Use a physical Android device to test plotly touch interactions instead of an emulator. This is likely a bug with either the `has-hover` package or the Android emulator, but I haven’t dug in deeply enough to figure out the source of the issue.

---

<div class="post-metadata">

**Author:** ![dmancera](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dmancera](https://community.plotly.com/u/dmancera)\
**Post date:** [November 14, 2017, 11:04am UTC](https://community.plotly.com/t/use-plotly-with-touch-interactions/929/6 "2017-11-14T11:04:59Z")

</div>

Hello,

I’ve made some functionality that depends on plotly\_click. Where /how can I make this click available to touch events on ipads and android phones?

Thanks.

---

<div class="post-metadata">

**Author:** ![Hoytron](https://avatars.discourse-cdn.com/v4/letter/h/e9a140/32.png) [@Hoytron](https://community.plotly.com/u/Hoytron)\
**Post date:** [November 20, 2017, 9:19pm UTC](https://community.plotly.com/t/use-plotly-with-touch-interactions/929/7 "2017-11-20T21:19:47Z")

</div>

Hello,

thank you very much!!! That helps a lot! I’m so glad to find a so easy an simple to use code extension.

Thank you Malina

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [June 18, 2018, 9:53pm UTC](https://community.plotly.com/t/use-plotly-with-touch-interactions/929/8 "2018-06-18T21:53:11Z")

</div>

For what it’s worth, I tested plotly.js events via Dash with a Microsoft Surface today, and hover and click events were fired. I tested with this app: dash.plot.ly/interactive-graphing.
