Useful links :
Chart JS Documentation - https://www.chartjs.org/docs/latest/
React Chart JS DOCs - https://www.npmjs.com/package/react-chartjs-2
Step 1 - Install chart js dependencies
Install chart js - npm install --save react-chartjs-2 chart.js
Step 2 -
BarChart.js
--------------
import React from "react";
import { Bar,Line,Doughnut } from "react-chartjs-2";
const BarChart = () => {
return (
<div className="charts">
<span>Chart below</span>
<Doughnut
data = {{
labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
datasets: [{
label: '# of Votes',
data: [2, 4, 3, 5, 9],
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)',
],
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
},
{
labels: '# for Covid',
data: [1, 4, 7, 9, 15],
backgroundColor : "red"
}
],
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}}
options = {{ maintainAspectRatio: true }}
/>
</div>
);
};
export default BarChart;
App.js :
----------
import './App.css';
import BarChart from './components/BarChart';
function App() {
return (
<div className="App">
<BarChart/>
</div>
);
}
export default App;
0 Comments