Zoom on mouse wheel

plotly.js
1

Hello guys!

I’m new here and i hope not to make any request already made.

I’m using plotly.js for some graphics and i need to know if it is possibile to set the zoom on the mouse wheel.
I have multiple y axes that are not zoomable (fixedrange: true) and one x axe that display a timeline. With the zoom i want to expand/make smaller the timeline.

Thanks.

2

Hello,
I think that you have to insert scrollZoom: true to Plotly.newPlot(id, data, layout) like this :

Plotly.newPlot(id, data, layout, {scrollZoom: true});

I hope it works.
Bye bye

2 Likes
3

Thank you! It works!

4

Thats nice!
You’re welcome.
bye

6

Hi,

is there a way to insert it as ‘layout’ attribute?

my code comes with:

fig = go.Figure(data=full_trace, layout=layout)
py.plot(fig,...)

Thanks

7

Hello, if I use dcc.Graph instead of newPlot, how to I add scrollZoom? When I tried to add scrollZoom attribute, it noticed that the attribute doesnot exist.
Can you give a simple example? Thank you

1 Like
8

If I have a draggable shape from SVG defined as below, the scroll wheel zoom does not work if the mouse is hovering the area where the shape is drawn. How to make the scroll wheel work also in this case?

layout: {
title: ‘A Simple Plot’,
dimension: “ratio”,
dragmode : ‘pan’,
hovermode: ‘closest’,
shapes: [
{
type: ‘path’,
path: SVGpath,
fillcolor: ‘rgba(255, 140, 184, 0.5)’,
line: {
color: ‘rgb(255, 140, 184)’
}
}],
…

9

you can include it as a config option in dcc.Graph, seen here https://dash.plotly.com/dash-core-components/graph

dcc.Graph(id=‘Your_id’,
config={‘scrollZoom’:True}
),

10

Thank you this helped and worked.