Zoom triggered when hiding/showing series by clicking legend #256

matcho · 2019-07-12T12:35:41Z

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

The text was updated successfully, but these errors were encountered:

benmccann · 2019-07-12T15:39:05Z

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

matcho · 2019-07-12T15:55:22Z

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 · 2019-07-15T07:16:44Z

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 · 2019-07-15T09:49:06Z

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 · 2019-07-15T09:54:35Z

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 · 2019-07-15T11:00:41Z

Yeah. We should do both. I think this PR would fix it: chartjs/Chart.js#6227

ikkala · 2020-05-07T22:09:55Z

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.

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 actual graph. Fixes chartjs#256

ikkala · 2020-05-18T10:29:03Z

@benmccann Was it bad idea to combine 2fd819f "Fix: Honor zoom.mode (xy/x/y) when applying zoom.threshold" to the same pull request with the fix for this issue #256?

matcho · 2020-08-27T13:20:29Z

Any news about this ? Thanks a lot

ikkala · 2020-08-27T14:18:55Z

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 · 2021-04-25T16:16:45Z

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 · 2021-05-26T14:09:05Z

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 · 2021-06-23T16:07:30Z

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

jussirantala · 2021-11-23T12:31:11Z

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 · 2021-11-23T12:35:40Z

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

jussirantala · 2021-11-23T13:37:27Z

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 · 2021-11-23T13:40:44Z

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

romor · 2022-11-01T21:00:40Z

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

Fixes chartjs#256

ikkala · 2023-09-27T14:52:05Z

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

grigoart · 2023-11-26T15:23:47Z

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 · 2023-12-20T11:53:08Z

+1 for @grigoart workaround

matcho changed the title ~~Zoom triggered when removing series by clicking legend~~ Zoom triggered when hiding/showing series by clicking legend Jul 12, 2019

ikkala mentioned this issue May 7, 2020

Fix: Honor zoom.mode (xy/x/y) when applying zoom.threshold. Don't trigger zoom outside the area of chart lines/bars. #352

Closed

etimberg added the bug label Apr 25, 2021

etimberg closed this as completed Apr 25, 2021

kurkle reopened this Nov 23, 2021

dou-du mentioned this issue Mar 29, 2023

Band/PDOS zoom changes when delesecting some PDOS channel aiidalab/aiidalab-qe#351

Closed

ikkala added a commit to ikkala/chartjs-plugin-zoom that referenced this issue Jul 13, 2023

Don't trigger the zoom on legends area

6a2a2bd

Fixes chartjs#256

ikkala linked a pull request Jul 13, 2023 that will close this issue

Don't trigger the zoom on legends area #772

Open

ikkala added a commit to ikkala/chartjs-plugin-zoom that referenced this issue Jul 14, 2023

Don't trigger the zoom on legends area

b9b5165

Fixes chartjs#256

ikkala mentioned this issue Jul 14, 2023

Zoom can be trigger outside of chart region #611

Open

papengav mentioned this issue Aug 8, 2024

Don't trigger the zoom on legends area papengav/chartjs-plugin-zoom#1

Merged

trullock mentioned this issue Oct 1, 2024

Don't trigger the zoom on legends area trullock/chartjs-plugin-zoom#5

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Zoom triggered when hiding/showing series by clicking legend #256

Zoom triggered when hiding/showing series by clicking legend #256

matcho commented Jul 12, 2019

benmccann commented Jul 12, 2019

matcho commented Jul 12, 2019 •

edited

Loading

matcho commented Jul 15, 2019

benmccann commented Jul 15, 2019

matcho commented Jul 15, 2019

benmccann commented Jul 15, 2019

ikkala commented May 7, 2020

ikkala commented May 18, 2020

matcho commented Aug 27, 2020

ikkala commented Aug 27, 2020 •

edited

Loading

etimberg commented Apr 25, 2021

DieCi007 commented May 26, 2021

pete-mcwilliams commented Jun 23, 2021

jussirantala commented Nov 23, 2021 •

edited

Loading

kurkle commented Nov 23, 2021

jussirantala commented Nov 23, 2021 •

edited

Loading

jussirantala commented Nov 23, 2021

romor commented Nov 1, 2022

ikkala commented Sep 27, 2023

grigoart commented Nov 26, 2023

CDimonaco commented Dec 20, 2023

Zoom triggered when hiding/showing series by clicking legend #256

Zoom triggered when hiding/showing series by clicking legend #256

Comments

matcho commented Jul 12, 2019

benmccann commented Jul 12, 2019

matcho commented Jul 12, 2019 • edited Loading

matcho commented Jul 15, 2019

benmccann commented Jul 15, 2019

matcho commented Jul 15, 2019

benmccann commented Jul 15, 2019

ikkala commented May 7, 2020

ikkala commented May 18, 2020

matcho commented Aug 27, 2020

ikkala commented Aug 27, 2020 • edited Loading

etimberg commented Apr 25, 2021

DieCi007 commented May 26, 2021

pete-mcwilliams commented Jun 23, 2021

jussirantala commented Nov 23, 2021 • edited Loading

kurkle commented Nov 23, 2021

jussirantala commented Nov 23, 2021 • edited Loading

jussirantala commented Nov 23, 2021

romor commented Nov 1, 2022

ikkala commented Sep 27, 2023

grigoart commented Nov 26, 2023

CDimonaco commented Dec 20, 2023

matcho commented Jul 12, 2019 •

edited

Loading

ikkala commented Aug 27, 2020 •

edited

Loading

jussirantala commented Nov 23, 2021 •

edited

Loading

jussirantala commented Nov 23, 2021 •

edited

Loading