116
rated 0 times
[
120]
[
4]
/ answers: 1 / hits: 6931
/ 3 Years ago, tue, august 10, 2021, 12:00:00
I am passing data from parent to child component in react , from App.js to chart.js through props and the values are passsed and i can see them logged the the console in child component but i want to change the state of chart data property as the props values changed so that the graph also gets changed .
here is my code for child component/chart.js file
import { useState } from "react";
import { Line ,Bar} from "react-chartjs-2"
const Bargraph = ({totalIncome,Balance,Expenses}) => {
**console.log("data is ",totalIncome,Balance,Expenses)**
const [state,setState] = useState({
labels:["Total Income","Expenses","Current Balance"],
datasets:[{
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data:[totalIncome,Balance,Expenses]
}]
})
return (
<section className="chart mb-4 mt-lg-5">
<div className="container-lg">
<div className="text-center">
<h2> Income , Expenses and Current Balance </h2>
<p className="lead"> Bar graph showing Total icnome , Expenses and remaining balance </p>
</div>
<div className="row justify-content-center align-items-center mt-3 g-4">
<div className="col-md-5">
<Line data={state}
options={{
title:{
display:true,
text:'Income , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
<div className="col-md-5">
<Bar data={state}
options={{
title:{
display:true,
text:'Income , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
</div>
</div>
</section>
);
}
export default Bargraph;
More From » node.js
