Cannot read property 'dragStarted' of undefined

[pratikdhavale]

Uncaught TypeError: Cannot read property 'dragStarted' of undefined at Object.beforeTooltipDraw (chartjs-plugin-crosshair.js:394) at Object.notify (Chart.min.js:10) at t._drawTooltip (Chart.min.js:10) at t.draw (Chart.min.js:10) at t.render (Chart.min.js:10) at Object.callback (Chart.min.js:10) at Object.advance (Chart.min.js:10) at Object.startDigest (Chart.min.js:10) at Chart.min.js:10

[filingroove]

+1 on this.

I'm also using the plugin with react-chartjs-2, chart.js version 2.7.3

[knvpk]

im also getting this problem.

[knvpk]

I checked out the code and found that the x-axis should be type linear or time, then plugin is working fine.

[iamstickfigure]

Well that sucks. That means it isn't compatible with https://github.com/nagix/chartjs-plugin-streaming since it uses a "realtime" axis.

[iamstickfigure]

Until this gets fixed, if you're also using the streaming plugin, you can get it to work with "realtime" scales by making a small change to the crosshair plugin's JS. Replacing all conditionals checking for "time" scales to use "realtime" as an alternative.

ie. "linear"===a||"time"===a becomes "linear"===a||"time"===a||"realtime"===a

"time"===t.options.scales.xAxes[0].type? becomes ("time"===t.options.scales.xAxes[0].type||"realtime"===t.options.scales.xAxes[0].type)?

"linear"!==t&&"time"!==t becomes "linear"!==t&&"time"!==t&&"realtime"!==t

[raymond1927]

I have a similar issue with using react-chartjs2. When I specify the x-axis as time,

options={{     
    suppressTooltips: true,
    responsive: true,
    scales: {
        xAxes: [{
            type: 'time'
        }]
    },
    tooltips: {
        mode: 'index',
        intersect: false
    }
}}

with the data,

datasets={
    ...
    data=[
        {x: 1565155933153, y: 1.5},
        {x: 1565155933163, y: 1.6},
        ...
    ]
}

However it still gives the error dragStated undefined.

[iamstickfigure]

@raymond1927 Any chance you have more than one chart on that page? If so, any charts which should not have the crosshair need to disable this plugin. Otherwise, this plugin will try to apply itself to every chart, even if it doesn't have the right scale type.

[raymond1927]

@iamstickfigure Thanks for the help, how do I disable a plugin per chart.

[iamstickfigure]

@raymond1927 In the place where you'd normally put the options for the plugin, just use false.

https://www.chartjs.org/docs/latest/developers/plugins.html#disable-plugins

options={     
    suppressTooltips: true,
    responsive: true,
    scales: {
        xAxes: [{
            type: 'time'
        }]
    },
    tooltips: {
        mode: 'index',
        intersect: false
    },
    plugins: {
        crosshair: false
    }
}

[TimUnderhay]

I tried the suggested options, which didn't work for me (using Chart.js 3.6.0). What I ultimately discovered is that for reasons unknown, the afterInit() hook never runs (guessing either a bug or change in Chart.js), which leads to the plugin not initialising correctly. Changing the hook from afterInit to either start() or beforeInit() resolves the problem.

It also requires the X axis scale to be named 'x' and not 'xAxes'.

I will submit a PR.

[TimUnderhay]

Submitted PR https://github.com/AbelHeinsbroek/chartjs-plugin-crosshair/pull/88.

[lowkeynicc]

Is there any update on this? I noticed the PR is still unmerged. This issue happens for me whenever moving mouse over the chart area before the page is finished loading.

[DaveSkender]

nudge @AbelHeinsbroek

[JBaczuk]

Another temporary workaround that seems to work is to add optional chaining at trace.js#L277:

-    return !chart.crosshair.dragStarted && !chart.crosshair.suppressTooltips;
+    return !chart.crosshair?.dragStarted && !chart.crosshair.suppressTooltips;

[ilias-t]

We just had to remove this plugin from a large production application given it intermittently caused blank screens for for our users. It would be an awesome one to fix, especially given there already appear to be proposed solutions.