I don't know what went wrong, there is no such an error notif, but the data in the chart won't show in the browser. I'm trying to make a simple chart data using react-chartjs-2 .
Here is my code: Chart.js
import React, {Component} from 'react';
import {Bar } from 'react-chartjs-2';
class Chart extends Component {
constructor(props) {
super(props);
this.state = {
chartData: {
labels: ['Boston', 'Worcester',
'Springfield', 'Lowell',
'Cambridge', 'New Bedford'],
datasets:[
{
label: 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
backgroundColor:[
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)'
]
}
]
}
}
}
render() {
return (
<div className="chart">
<Bar
data={this.state.chartData}
options={{
maintainAspectRatio: false
}}
/>
</div>
)
}
}
export default Chart;
And here my App.js
import './App.css';
import Chart from './components/Chart';
function App() {
return (
<div className="App">
<Chart />
</div>
);
}
export default App;
I already install the react-chartjs-2, and seems it still doesnt work here.
You need to install chart.js
too, also you need to register them like this:
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Legend);
<Doughnut data={...} />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.