ZoomIn ZoomOut on button click

[LipSoft]

Hi love your project

So far I have been able to reset zoom on a button , but i would like toknow if there is a ZoomIn/Out event to call on button click .

Since alot of people use trackpads and dont have a mouse wheel i think would be nice future.

[etimberg]

@LipSoft this isn't supported at the moment. It should be relatively easy to export the functions that do zooming and panning allowing them to be triggered programatically.

[ondrejtichacek]

+1 for the feature request.

@LipSoft could you please share your code for the zoom reset button? Thanks!

[LipSoft]

@ondrejtichacek

I reset zoom like this -->

function resetZoom() {
  window.scatterChart.resetZoom()
}
var ctx = $("#myChart");

window.scatterChart = new Chart(ctx, {});

[hornergraphic]

+1 for this feature request! Thanks for the plugin :)

[kartik-ramachandran]

i have the chartjs-plugin-zoom.js file in my solution and just added two more function to the chart instance to zoom in and zoom out after the _WheelHandler function.

  chartInstance.ZoomIn = function () {
                        var rect = document.getElementById(chartInstance.canvas.id).getBoundingClientRect();

                        var center = {
                            x: rect.width / 2,
                            y: rect.height / 2
                        };

                        doZoom(chartInstance,1.1,center);
                    };


                    chartInstance.ZoomOut = function () {
                        var rect = document.getElementById(chartInstance.canvas.id).getBoundingClientRect();

                        var center = {
                            x: rect.width / 2,
                            y: rect.height / 2
                        };

                        doZoom(chartInstance,0.909,center);
                    };

and then I just call them on the button click

[ravau]

i have the chartjs-plugin-zoom.js file in my solution and just added two more function to the chart instance to zoom in and zoom out after the _WheelHandler function.

  chartInstance.ZoomIn = function () {
                        var rect = document.getElementById(chartInstance.canvas.id).getBoundingClientRect();

                        var center = {
                            x: rect.width / 2,
                            y: rect.height / 2
                        };

                        doZoom(chartInstance,1.1,center);
                    };


                    chartInstance.ZoomOut = function () {
                        var rect = document.getElementById(chartInstance.canvas.id).getBoundingClientRect();

                        var center = {
                            x: rect.width / 2,
                            y: rect.height / 2
                        };

                        doZoom(chartInstance,0.909,center);
                    };

and then I just call them on the button click

Woul love to see working example, cant make it work.

[jledentu]

Even if users can handle such use cases by setting min / max manually, I think that exposing a doZoom public method in the plugin API would make life easier. Don't you think @benmccann?

function doZoom(percentZoomX, percentZoomY, focalPoint, options)

[benmccann]

There's often a complex calculation in the plugin code resulting in the value of focalPoint that's used (and which has led to some bugs in the past). I think it might be a very difficult value for the user to come up with and so I wonder if there might be a more user-friendly API we could come up with and would be a bit hesitant to make the internal API available

[JelleBlaauw]

I have added the following public method:

chartInstance.doZoom = function(percentage) {
    doZoom(chartInstance, 1 + (percentage / 100), 1 + (percentage / 100), undefined, undefined, true);
    // Manually trigger zoom complete callback.
    const zoomOptions = chartInstance.$zoom._options.zoom;
    if (typeof zoomOptions.onZoomComplete === 'function') {
        zoomOptions.onZoomComplete({chart: chartInstance});
    }
}

The focalPoint parameter is omitted, because it is calculated from the center in the doZoom function.
This works perfectly fine with version 0.7.4 (I haven't tested it on newer versions).

Usage example:

chart.doZoom(10); // Zoom in
chart.doZoom(-10); // Zoom out