Skip to content
This repository has been archived by the owner on Jul 19, 2019. It is now read-only.

Uncaught (in promise) TypeError: Cannot read property 'xLabels' of undefined #197

Open
nomanali-dev opened this issue Nov 20, 2017 · 0 comments

Comments

@nomanali-dev
Copy link

I am getting this error while setting up react-chartjs, i am using example given here .
This is the error i am getting:

Uncaught (in promise) TypeError: Cannot read property 'xLabels' of undefined
    at updatePoints (core.js:127)
    at Object.classData.componentWillReceiveProps (core.js:48)
    at ReactCompositeComponent.js:608
    at measureLifeCyclePerf (ReactCompositeComponent.js:73)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:607)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:544)
    at Object.receiveComponent (ReactReconciler.js:122)
    at Object.updateChildren (ReactChildReconciler.js:107)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:204)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:308)

Here is my code:

var Chart = require('chart.js');
var LineChart = require("react-chartjs").Line;
export default class Dashboard extends Component {
	constructor(props){
    super(props);
    var result = '';
    this.state = {
       chartData: '',
       chartOptions: ''
    };
    
  }

  componentDidMount(){
    var chartData =  {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    }
    var chartOptions = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
    this.setState({
      chartData: chartData,
      chartOptions: chartOptions
    })
  }

  render () {
  	
    return (
      <div className="container">
      	<div className="chart-wrapper">  
          <LineChart data={this.state.chartData} width="600" height="250"/>
        </div>
      </div>
    )
  }
}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant