react-chartjs
react-chartjs copied to clipboard
Uncaught (in promise) TypeError: Cannot read property 'xLabels' of undefined
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>
)
}
}