Zoom triggered when hiding/showing series by clicking legend

[matcho]

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

[benmccann]

What version are you using? I thought this was fixed in the latest version

[matcho]

Thank you for your answer. I'm using Chart.js version 2.7.3 and chartjs-plugin-zoom version 0.7.2, installed via NPM yesterday morning. It seems that 0.7.3 was released just a few hours later; will try that as soon as possible, sorry for any inconvenience.

[matcho]

Hi. I updated to 0.7.3 but the problem still happens. If I can send any more information or be useful in any way please let me know. All the best.

[benmccann]

I'm not at my computer at the moment to test, but before it would happen with a click and that's what I thought was fixed. However, if you moved your mouse a very small distance while clicking that would be interpreted as a drag and zoom the chart. I wonder if you might be slightly moving the mouse without noticing. We perhaps should add a minimum distance the mouse must be moved to be considered a drag if that's the case.

[matcho]

Oh yes you're right ! It's indeed the slight mouse movement that is triggering a drag event. Although the minimum distance trick sounds nice, perhaps it is possible to listen to mouse drag events on the "series" part of the chart only, and not the legend ?

[benmccann]

Yeah. We should do both. I think this PR would fix it: https://github.com/chartjs/Chart.js/pull/6227

[ikkala]

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]

@benmccann Was it bad idea to combine https://github.com/chartjs/chartjs-plugin-zoom/pull/352/commits/2fd819f24f47601caa2603a265dcceb60de451e8 "Fix: Honor zoom.mode (xy/x/y) when applying zoom.threshold" to the same pull request with the fix for this issue #256?

[matcho]

Any news about this ? Thanks a lot

[ikkala]

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.

[etimberg]

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.

[DieCi007]

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.

[pete-mcwilliams]

Mouse drag on the legend is zooming for me chart.js": "^3.3.2" "chartjs-plugin-zoom": "^1.0.1"

[jussirantala]

I'm still getting this bug. If I click legends to hide/show data, the chart may suddenly zoom at random place. My legends are on the left side of the chart.

"chart.js": "^3.4.0",
"chartjs": "^0.3.24",
"chartjs-adapter-moment": "1.0.0",
"chartjs-plugin-annotation": "^1.0.2",
"chartjs-plugin-zoom": "^1.1.0",

[kurkle]

There was a related bug fixed in 1.2.0 (#574), @jussirantala can you try updating?

[jussirantala]

There was a related bug fixed in 1.2.0 (#574), @jussirantala can you try updating?

Updated chart.js and this plugin. Still getting the same behaviour.

"chart.js": "^3.5.1",
"chartjs": "^0.3.24",
"chartjs-adapter-moment": "1.0.0",
"chartjs-plugin-annotation": "^1.0.2",
"chartjs-plugin-zoom": "^1.2.0",

My plugin settings: zoom: { pan: { enabled: true, mode: 'xy', modifierKey: 'ctrl', }, zoom: { mode: 'xy', drag: { enabled: true, borderColor: 'rgb(54, 162, 235)', borderWidth: 1, backgroundColor: 'rgba(54, 162, 235, 0.3)' }, wheel: { enabled: true }, pinch: { enabled: true, }, onZoomComplete: () => this.setState({ zoomed: true }) } }

[jussirantala]

Now I disabled "drag" option and I don't get the bug anymore. But the drag function was why I installed this plugin.

[romor]

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

[ikkala]

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

[grigoart]

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

[CDimonaco]

+1 for @grigoart workaround