Cannot read properties of undefined (reading 'enabled') at Object.afterDraw

[dan-ville]

Hi, I'm using this plugin (version 1.2.0) in a Next13 project with Turbo and ChartJS version 4.2.1, I am getting this error when working with Line charts:

Uncaught TypeError: Cannot read properties of undefined (reading 'enabled')
    at Object.afterDraw

This is my component implementation:

<Line
        data={chartData}
        options={{
          aspectRatio: 3,
          plugins: {
            title: { text: label, display: true },
            crosshair: { enabled: true },
            tooltip: {
              mode: 'interpolate',
              intersect: false,
            },
            annotation: {
              annotations: {
                line1: {
                  drawTime: 'afterDatasetsDraw',
                  adjustScaleRange: true,
                  type: 'line',
                  scaleID: 'x',
                  value: completeValue,
                  label: {
                    content: `Complete Date ${new Date(complete).toLocaleDateString()}`,
                    enabled: true,
                    display: true,
                  },
                },
              },
            },
          },
          scales: {
            y: {
              ticks: {
                callback: function (value, index, values) {
                  return numberFormatter.format(value)
                },
              },
            },
          },
        }}
        plugins={CrosshairPlugin}
      />
      </Card>

This is the entire stack trace:

react-dom.development.js?bf9a:26274 Uncaught TypeError: Cannot read properties of undefined (reading 'enabled')
    at Object.afterDraw (webpack-internal:///(app-client)/../../node_modules/chartjs-plugin-crosshair/dist/chartjs-plugin-crosshair.esm.js:363:26)
    at callback (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chunks/helpers.segment.js:208:19)
    at PluginService._notify (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:5114:78)
    at PluginService.notify (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:5097:29)
    at Chart.notifyPlugins (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:6352:30)
    at Chart.draw (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:6068:14)
    at Chart.render (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:6038:18)
    at Chart.update (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:5923:14)
    at Chart.eval (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:5655:102)
    at Chart.eval [as _doResize] (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chunks/helpers.segment.js:730:16)
    at Chart._resize (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:5744:22)
    at Chart.resize (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:5715:18)
    at attached (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:6286:18)
    at Chart.bindResponsiveEvents (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:6298:13)
    at Chart.bindEvents (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:6242:18)
    at Chart._initialize (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:5701:14)
    at new Chart (webpack-internal:///(app-client)/../../node_modules/chart.js/dist/chart.js:5664:14)
    at renderChart (webpack-internal:///(app-client)/../../node_modules/react-chartjs-2/dist/index.js:102:28)
    at eval (webpack-internal:///(app-client)/../../node_modules/react-chartjs-2/dist/index.js:166:9)
    at commitHookEffectListMount (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26602:26)
    at commitHookPassiveMountEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28605:7)
    at reconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28858:9)
    at recursivelyTraverseReconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28838:5)
    at reconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28856:9)
    at recursivelyTraverseReconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28838:5)
    at reconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28938:9)
    at recursivelyTraverseReconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28838:5)
    at reconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28856:9)
    at recursivelyTraverseReconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28838:5)
    at reconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28938:9)
    at recursivelyTraverseReconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28838:5)
    at reconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28856:9)
    at recursivelyTraverseReconnectPassiveEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28838:5)
    at commitPassiveMountOnFiber (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28792:13)
    at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28688:7)
    at commitPassiveMountOnFiber (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28822:9)
    at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28688:7)
    at commitPassiveMountOnFiber (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28822:9)
    at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28688:7)
    at commitPassiveMountOnFiber (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28822:9)
    at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28688:7)
    at commitPassiveMountOnFiber (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28707:9)
    at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28688:7)
    at commitPassiveMountOnFiber (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28822:9)
    at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28688:7)
    at commitPassiveMountOnFiber (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28707:9)
    at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28688:7)
    at commitPassiveMountOnFiber (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28707:9)
    at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28688:7)
    at commitPassiveMountOnFiber (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28707:9)

[kashyappatel7]

I'm getting the same issue

[RodrigoGarciaLab]

Any updates on this?? I'm getting this exact same error.

[Anzil-Aufait]

Any updates on this? I'm getting this exact same error.

[RobsonMi]

Unfortunately the same issue here as well.

[zumoberhaus]

I got the same error with the plugin version 2.0.1 and chart.js 4 using Angular. It seems, that this is a timing error. The plugin was/is not ready in chart.

So in the afterDraw function the access on the variable chart.crosshair.enabled failed.

My quick fix is not beautiful, but it helped me and hope some of you guys too:

import { CrosshairPlugin, Interpolate } from 'chartjs-plugin-crosshair';
// Dont use the plugin as it is. Error in afterDraw function  
// Chart.register(CrosshairPlugin);  
const CustomCrosshairPlugin = function (plugin) {  
  const originalAfterDraw = plugin.afterDraw;  
  plugin.afterDraw = function(chart, easing) {  
      if (chart && chart.crosshair) {  
        originalAfterDraw.call(this, chart, easing);  
      }  
  };  
  return plugin;  
};  
Chart.register(CustomCrosshairPlugin(CrosshairPlugin));  

The trick is to override this function and make the check here. Should work also, if the plugin will be updated.

[rsd]

The trick is to override this function and make the check here. Should work also, if the plugin will be updated.

worked as a charm.

Thank you