question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Issue Description

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?

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
yoloOnTheBattlefieldcommented, Apr 17, 2019

I have the same problem

0reactions
kaungmyatlwincommented, Apr 29, 2020

@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

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-chartjs error Cannot read property 'Chart' of undefined
When following the instructions to test it I get an error cannot read property 'Chart' of undefined' at line 10 Chart.js. here is...
Read more >
Chart.js Cannot read property 'fontSize' of undefined-Chart.js
Coding example for the question Chart.js Cannot read property 'fontSize' of undefined-Chart.js.
Read more >
Chart.js
Chart.js provides a set of frequently used chart types, plugins, and customization options. In addition to a reasonable set of built-in ...
Read more >
Chart js zoom
Uncaught TypeError : Cannot read properties of undefined (reading 'helpers') for chartjs ... a zone to zoom on it (X axis only). move,...
Read more >
Chartjs stacked bar 100
What about using the React-ChartJS-2 Wrapper? Stacked Bar Chart - CodePen Apr 21 ... These are used to set display properties for a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found