echarts Zoom with drag

Zoom with drag

Open Bilge opened this issue 3 years ago • 21 comments

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.

Oct 07 '20 15:10 Bilge

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 [email protected]. 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! 🍵

Oct 07 '20 15:10 echarts-bot[bot]

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

Oct 09 '20 02:10 pissang

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

Jan 29 '21 11:01 fmmattioni

It'd be great to activate this by default

Feb 07 '21 07:02 tamersalama

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

Feb 19 '21 10:02 Bilge

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)

Mar 18 '21 13:03 throrin19

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

Apr 06 '21 10:04 AmirAsghary

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

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
            },
        },
    },
},

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,
});

Apr 07 '21 12:04 throrin19

Apr 30 '21 21:04 ruisebastiao

Sep 30 '21 07:09 heng4

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

Mar 31 '22 15:03 MeetzhDing

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

Mar 31 '22 15:03 Bilge

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 :)