search

chartjs / chartjs-plugin-zoom

Zoom and pan plugin for Chart.js
MIT License
584 stars 324 forks source link

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

Open matcho opened 5 years ago

matcho commented 5 years ago

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 commented 5 years ago

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

matcho commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

ikkala commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

Any news about this ? Thanks a lot

ikkala commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

jussirantala commented 2 years ago

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 commented 2 years ago

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

jussirantala commented 2 years ago

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 commented 2 years ago

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

romor commented 1 year ago

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

ikkala commented 11 months ago

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

grigoart commented 9 months ago

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 commented 8 months ago

+1 for @grigoart workaround