Zoom In/Out using mouse wheel

[Sumon-miazi]

@junedchhipa Is there any way to zoom in/out using mouse wheel? I need these features. Or how can I call apex chart build in handleZoomIn/handleZoomOut function from outside? help please...

[haroflow]

This would be nice, but I think it should be configurable to turn it off as well... In pages with lots of charts it might get difficult to scroll the page normally.

Thanks!

[elbasan]

any update on this?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[DBESSIERE]

It's an indispensable function today. It's surprising that it's not supported

[brianlagunas]

I agree. This is a must have feature. Reopening.

[jbiosca78]

I would love it, is the only think I miss from apexcharts

[OsmnShkh]

Agreed here, would be useful for the timeline charts especially

[justinyng]

Thanks for reopening this feature request, I also agree it would be a very useful feature.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gyoogle]

Not yet?? I want this feature

[SerhatUzbas]

+1

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Sandr0oo]

Please tell me if this functionality has appeared?

[RDUser-dev]

I agree. This is a must have feature. please Reopening.

[fikrihanda]

• 1

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jbiosca78]

I got tired of waiting for this, 4 years and nobody cares about a simple mouse option.. I'm moving to flotcharts

[abruu]

need this feature !!

[mrosminin]

+1

[hokascha]

use this, note var chart is the chart instance after it is rendered.

document.querySelector("#your-chart").addEventListener('wheel', function(event) {
    event.preventDefault(); // Prevent scrolling the page

    // Calculate the relative position of the mouse on the chart
    var chartRect = chart.w.globals.dom.baseEl.getBoundingClientRect();
    var mouseX = (event.clientX - chartRect.left) / chartRect.width;

    var currentMinX = chart.w.globals.minX;
    var currentMaxX = chart.w.globals.maxX;
    var totalX = currentMaxX - currentMinX;

    // Determine zoom factor
    var zoomFactorIn = 0.1; // Adjust this value as needed for zooming in
    var zoomFactorOut = 0.9; // Significantly larger factor for zooming out
    var zoomRange;

    var newMinX, newMaxX;
    if (event.deltaY < 0) {
        // Zoom In
        zoomRange = zoomFactorIn * totalX;
        var midPoint = currentMinX + mouseX * totalX;
        newMinX = midPoint - zoomRange / 2;
        newMaxX = midPoint + zoomRange / 2;
    } else {
        // Zoom Out
        zoomRange = zoomFactorOut * totalX;
        newMinX = currentMinX - zoomRange / 2;
        newMaxX = currentMaxX + zoomRange / 2;
    }

    // Constrain within original chart bounds
    newMinX = Math.max(newMinX, chart.w.globals.initialMinX);
    newMaxX = Math.min(newMaxX, chart.w.globals.initialMaxX);

    // Apply zoom if valid
    if (!isNaN(newMinX) && !isNaN(newMaxX) && newMinX < newMaxX) {
        chart.zoomX(newMinX, newMaxX);
    }
});

(Thanks, ChatGPT!)

[tony-nz]

flotcharts

You went from this to a jquery library?

+1 for this feature