Chartjs-2(React), Lines do not appear - reactjs

Question

When I console.log(this.state) in App.js, Object of data appear on devtool Browser but no change on screen.
No lines, no options, nothing.
When I console.log(this.state) in Chart.js, Object appear two time but always empty.
No error message for once, but it's not better.
I want create two lines, I don't know if it's the right way.
But I don't think problem comes from there
App.js
import React, { Component } from 'react';
import './style/App.css';
import axios from 'axios'
import Table from './components/table/Table'
import Chart from './components/Chart'
class App extends Component {
state = {
tabData: [],
chartData: {}
}
componentWillMount = () => {
this.getDataFromServer()
}
getDataFromServer = () => {
axios.get("http://localhost:8000")
.then((response) => {
const twentyObj = response.data.splice(0,20);
const time = twentyObj.map(item =>
item.timestamp
);
const cacData = twentyObj.map(item =>
item.stocks.CAC40
);
const nasData = twentyObj.map(item =>
item.stocks.NASDAQ
);
this.setState({
tabData:twentyObj,
chartData:{
labels: [time],
datasets:[
{ label:"CAC40",
data:[cacData],
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
},
{ label:"NASDAQ",
data:[nasData],
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,30,192,0.4)',
borderColor: 'rgba(75,30,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,30,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,30,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
}
],
}
})
console.log(this.state)
})
.catch(function (error) {
console.log(error);
})
}
render() {
return (
<div className="App">
<h1>TEST Project</h1>
<Chart linesData={this.state.chartData}/>
<Table stateData={this.state.tabData}/>
</div>
);
}
}
export default App;
Chart.js
import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
class Chart extends Component{
state = {
chartLinesData:this.props.linesData
}
render(){
console.log(this.state)
return(
<Line data={this.state.chartLinesData}
width={300}
height={150}
options={{
maintainAspectRatio: false
}}
/>
)
}
}
export default Chart;

Answer 1

Try like this.. This works for me:
npm install --save react-chartjs-2 chart.js
In your page import things like:bar, line, etc as per requirement.
import { Doughnut, Bar, Line, Pie } from 'react-chartjs-2';
In constructor, fill datasets in the state:
this.state = {
lineChartData: {
labels: ['01', '02', '03', '04', '05', '06'],
datasets: [{
label: 'X',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
finally, call your component/graph in jsx:
<Line
data={this.state.lineChartData}
options={{ maintainAspectRatio: true }}
/>
Hope this works fine.