Cannot read property 'xAxes' of undefined [react-chartjs-2]

[kaungmyatlwin]

I'm trying to integrate this plugin into <Line> component. Here is my integration code.

import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-crosshair';

...
...

const options = {
      responsive: true,
      crosshair: {
        line: {
          color: '#F66',  // crosshair line color
          width: 1        // crosshair line width
        },
        sync: {
          enabled: true,            // enable trace line syncing with other charts
          group: 1,                 // chart group
          suppressTooltips: false   // suppress tooltips when showing a synced tracer
        },
        zoom: {
          enabled: true,                                      // enable zooming
          zoomboxBackgroundColor: 'rgba(66,133,244,0.2)',     // background color of zoom box 
          zoomboxBorderColor: '#48F',                         // border color of zoom box
          zoomButtonText: 'Reset Zoom',                       // reset zoom button text
          zoomButtonClass: 'reset-zoom',                      // reset zoom button class
        },
        callbacks: {
          beforeZoom: function(start, end) {                  // called before zoom, return false to prevent zoom
            return true;
          },
          afterZoom: function(start, end) {                   // called after zoom
          }
        }
      }
}

...

render() {
  return (
    <div>
      <Line data={myData}  options={options} />
    </div>
  );
}

How do I make this plugin know react-chartjs-2?

[yoloOnTheBattlefield]

I have the same problem

[kaungmyatlwin]

@yoloOnTheBattlefield This isn't exactly integrating the whole plugin but I was rather to create something close to it. 😄 Have a look -> https://github.com/jerairrest/react-chartjs-2/issues/383

[yoloOnTheBattlefield]

@yoloOnTheBattlefield This isn't exactly integrating the whole plugin but I was rather to create something close to it. 😄 Have a look -> jerairrest/react-chartjs-2#383

My issue lies within the fact that the crosshair works if i have two graphs on a page, but If i got just one the whole app crashes, how can I work around your plugin to link two graphs together?

thanks buddy!

[aidenappl]

Having the same issue, trying a load of stuff.

[kaungmyatlwin]

@aidenappl I have a "hacky" solution if you like to see, but I don't know if it is feasible for your use case.

Have a look at it here -> https://github.com/jerairrest/react-chartjs-2/issues/383#issuecomment-473771260