Reputation: 191
So I have a class LineChart.js which contains this code:
import React from 'react'
import {Line} from 'react-chartjs-2';
const data = {
labels: ['red'],
datasets: [{
label: 'My First Dataset',
data: [65],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
function LineChart() {
return (
<div>
<h3>Hello</h3>
<Line>
data = {data}
</Line>
</div>
)
}
export default LineChart
I call this in another class by using:
<div className={classes.chartContainer}>
<LineChart></LineChart>
</div>
When I run this code it shows me a text "Hello" and under it is a default graph, but no data has been processed. See image: https://gyazo.com/312696275a57306c531d3872c75aa0d9
Does anybody know what i'm doing wrong? I'm seeing no weird error loggings.
Upvotes: 0
Views: 224
Reputation: 17
I believe it should be like this:
<Line data={data}/>
Given this small description https://www.npmjs.com/package/react-chartjs-2
Upvotes: 1