Zoom dont work on line chart

[nduginets]

Hi, there is a problem that the zoom does not work for graphs with the type of "line". I use several graphs, and I need synchronization of the crosshair and such synchronization with the zoom, now the crosshair is working properly, but after performing the zoom, all data disappears from the graphs. Any idea how to fix this?

[dszidi]

@nduginets did you ever resolve this issue? I am having the same problem.

[anatoly314]

https://github.com/AbelHeinsbroek/chartjs-plugin-crosshair/issues/15

[maxwell-oroark]

+1

[maxwell-oroark]

Crazy update... I got this to work by debouncing my onClick handler on the component. e.g.

<Line onClick={() => debounce(myFunc(), { trailing: true }) } /> 

Crazier still - I thought for sure the plugin just wasn't happy with having zoom + onClick handler but when you remove the onClick handler you get the same bug. No data on chart. So you need an onClick handler AND you need to debounce it for it to work with line component. Wow.

cc @anatoly314 @dszidi @nduginets @AbelHeinsbroek

[maxwell-oroark]

I'm guessing that by waiting for a bit and then forcing the Line component to update is what's causing this ^ to work

[movy]

Still experiencing this with Vue in 2024. The problem was in X-scale that used date adapter: seems like this plugin returns floats as start and end values for zooming and this throws adapter in disarray. For now I disabled the adapter (i.e. switch to text date labels instead of actual dates), and zooming works fine.

scales: {
            x: {
                // type: 'time',
                // time: {
                //     unit: 'hour',
                //     displayFormats: { hour: 'MMM D, HH:mm' }
                // },
                // adapter: { date: { locale: 'en-GB' } },
                title: {
                    display: true,
                    text: 'Time'
                }
            },