Zoom with drag

[Bilge]

What problem does this feature solve?

Currently we need to attach a dataZoom component to zoom. This enables either widget zooming or mouse wheel zooming, but it does not support left-click drag zooming, which seems more intuitive and precise. That is, it is easier to zoom into the data you want by highlighting it directly, rather than controlling a separate widget (which is cumbersome) or using a mouse wheel (which is imprecise).

What does the proposed API look like?

See live example.

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[pissang]

Hi @Bilge. We have a toolbox component to support the zoom by brush feature.

https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch

It can be turned on by clicking

But I think having it in the dataZoom component is also necessary. Will plan it in the feature

[fmmattioni]

Any news if it is already possible to zoom in when dragging? Or perhaps to turn on the zoom feature by default?

[tamersalama]

It'd be great to activate this by default

[Bilge]

@pissang Can we get this issue included in an upcoming milestone?

[throrin19]

It's possible to activate this by default without toolbox configured or showed ? In out case we want zoom on dragging by default in our charts (like grafana)

[AmirAsghary]

+1 it is very much needed. I believe it offers better UX as well

[throrin19]

I made a hack to do this. If someone is interrested, I made this like that :

1. In Options, I initiate toolbox and I set buttons with empty path to not show them :

   toolbox : {
       orient   : 'vertical',
       itemSize : 13,
       top      : 15,
       right    : -6,
       feature  : {
           dataZoom : {
               yAxisIndex  : 'none',
               icon        : {
                   zoom : 'path://', // hack to remove zoom button
                   back : 'path://', // hack to remove restore button
               },
           },
       },
   },

2. When chart is available, I dispatch action to activate toolbox zoom (in my case, the toolbox action is already dispatch when finished event is fired) :

   chartInst.dispatchAction({
       type                    : 'takeGlobalCursor',
       key                     : 'dataZoomSelect',
       dataZoomSelectActive    : true,
   });

[ruisebastiao]

+1

[heng4]

+1

[MeetzhDing]

Can we get this issue included in an upcoming milestone? @pissang

[Bilge]

...it is... 👉🏻 🏁 5.3

[DaveMDS]

Hi, we are at 5.4 and still cannot find an easy way to activate the drag-to-zoom by default. I also thing this would be a great usability improvement, all my clients try that type of zoom at first Thanks :)

[thorrak]

+1 on this - definitely interested if it was to be made available!

[oyvindi]

ditto, need this as well !

[fnlombard]

I also require this. I am using eCharts to build a UI for a spectrum analyser.

[vildantursic]

+1

[tobias-eberle]

+1

[eskwisit]

I'm pretty sure PR are welcomed, aren't they ? 🙄

[slymnozdmrc]

+1

[c3-ryanlittle]

+1