chartjs-plugin-zoom: Zoom triggered when hiding/showing series by clicking legend

Hi.

I have a chart with 2 or more series, drag zoom feature enabled, pan feature disabled, and chart legend enabled.

Sometimes when clicking multiple times the chart legend to show/hide one series or another, a zoom event is suddenly triggered (onZoomComplete callback is executed) and everything disappears: chart axis show ranges totally outside the data range.

Calling resetZoom() make things go back to normal.

I’m using the following configuration

{
    zoom: {
        pan: {
            enabled: false,
            mode: "xy",
        },
        zoom: {
            enabled: true,
            drag: true,
            mode: "xy",
            onZoomComplete: someFunction
        }
    }
}

Thanks in advance for any help.

Mathias

About this issue

Original URL
State: open
Created 5 years ago
Comments: 21 (6 by maintainers)

Commits related to this issue

Don't trigger zoom outside the area of chart lines/bars If user starts mouse down for example in area of legends or axis the zoom starts. This fix limits the starting of zooming to the area of the ac... — committed to ikkala/chartjs-plugin-zoom by deleted user 4 years ago
Don't trigger the zoom on legends area Fixes chartjs#256 — committed to ikkala/chartjs-plugin-zoom by ikkala a year ago
Don't trigger the zoom on legends area Fixes chartjs#256 — committed to ikkala/chartjs-plugin-zoom by ikkala a year ago

Most upvoted comments

The following workaround works for me:

zoom: {
    zoom: {
        ... ,
        // check if clicked inside chart area. If this returns false, zooming is aborted and onZoomRejected is invoked
        // see https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#zoom-events
        onZoomStart: e => e.point.x > e.chart.chartArea.left && e.point.x < e.chart.chartArea.right && e.point.y > e.chart.chartArea.top && e.point.y < e.chart.chartArea.bottom
    }
}

grigoart on Nov 26, 2023

I think this is resolved in chart.js v3 and zoom plugin 1.0.0-beta.1 since the click is now limited to the chart area.

etimberg on Apr 25, 2021

Was there something problematic in my PR #772 that tries to fix this issue?

ikkala on Sep 27, 2023

Any news about this? To me this seems to be a rather common problem when using drag mode.

romor on Nov 1, 2022

Hi, I am currently working with chart.js v3.3 and chartjs-plugin-zoom v1.0 and experiencing this problem. A slight move on the label registers as mouse drag.

DieCi007 on May 26, 2021

Any news about this ? Thanks a lot

Meanwhile waiting the merge, you can use the pull request source https://github.com/ikkala/chartjs-plugin-zoom – of course more official patch would be nice.

ikkala on Aug 27, 2020

I think this PR would fix it: chartjs/Chart.js#6227

I tried to apply this Chart.js 3.x fix to Chart.js 2.9.3 but it didn’t seem to help in case of zoom plugin. However, I did same kind of fix into zoom plugin directly – I can make a pull request based on it.

ikkala on May 7, 2020