javascript - How to update State of chart.js in React - Stack Overflow

admin管理员组

文章数量:1345139

I am passing data from parent to child ponent 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 ponent 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 ponent/chart.js file

import { useState } from "react";
import { Line ,Bar} from "react-chartjs-2"

const Bargraph = ({totalIne,Balance,Expenses}) => {

**console.log("data is ",totalIne,Balance,Expenses)**

const [state,setState] = useState({

    labels:["Total Ine","Expenses","Current Balance"],
    datasets:[{

        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data:[totalIne,Balance,Expenses]

    }]
})



    return ( 
<section className="chart mb-4 mt-lg-5">

<div className="container-lg">
    <div className="text-center">

        <h2>  Ine , 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:'Ine , 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:'Ine , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />



</div>
</div>




</div>

</section>

     );
}
 
export default Bargraph;

I am passing data from parent to child ponent 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 ponent 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 ponent/chart.js file

import { useState } from "react";
import { Line ,Bar} from "react-chartjs-2"

const Bargraph = ({totalIne,Balance,Expenses}) => {

**console.log("data is ",totalIne,Balance,Expenses)**

const [state,setState] = useState({

    labels:["Total Ine","Expenses","Current Balance"],
    datasets:[{

        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data:[totalIne,Balance,Expenses]

    }]
})



    return ( 
<section className="chart mb-4 mt-lg-5">

<div className="container-lg">
    <div className="text-center">

        <h2>  Ine , 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:'Ine , 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:'Ine , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />



</div>
</div>




</div>

</section>

     );
}
 
export default Bargraph;

• javascript
• node.js
• reactjs
• mean
• mern

Share Improve this question Follow asked Aug 10, 2021 at 7:58 node Devnode Dev 6911 gold badge11 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The other answers about useEffect show how you can achieve this when using state. Your example, however, does not require state at all. Think about props as very similar to state: Changes trigger a rerender automatically so if you can calculate something directly from them, do it in the render function/functional ponent.

import { Line ,Bar} from "react-chartjs-2"

const Bargraph = ({totalIne,Balance,Expenses}) => {

// simply calculate the chartData from the props
const chartData = {

    labels:["Total Ine","Expenses","Current Balance"],
    datasets:[{

        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data:[totalIne,Balance,Expenses]

    }]
}



    return ( 
<section className="chart mb-4 mt-lg-5">

<div className="container-lg">
    <div className="text-center">

        <h2>  Ine , 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={chartData}
    
    options={{
            title:{
              display:true,
              text:'Ine , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />




</div>


<div className="col-md-5">

<Bar data={chartData}
    
    options={{
            title:{
              display:true,
              text:'Ine , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />



</div>
</div>




</div>

</section>

     );
}
 
export default Bargraph;

use useEffect to get updated values.

import { useState } from "react";
import { Line ,Bar} from "react-chartjs-2"

var Bargraph = ({totalIne,Balance,Expenses}) => {

**console.log("data is ",totalIne,Balance,Expenses)**

const [state,setState] = useState({

    labels:["Total Ine","Expenses","Current Balance"],
    datasets:[{

        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data:[totalIne,Balance,Expenses]

    }]
})

useEffect(() => {
    setState({
        labels:["Total Ine","Expenses","Current Balance"],
        datasets:[{
            backgroundColor: 'rgba(75,192,192,1)',
            borderColor: 'rgba(0,0,0,1)',
            borderWidth: 2,
            data:[totalIne,Balance,Expenses]
    
        }]
    })

}, [totalIne,Balance,Expenses]);


    return ( 
<section className="chart mb-4 mt-lg-5">

<div className="container-lg">
    <div className="text-center">

        <h2>  Ine , 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:'Ine , 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:'Ine , Expenses and Current Balance',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}

 />



</div>
</div>




</div>

</section>

     );
}
 
export default Bargraph;

You can use useEffect to update your state when props change

  useEffect(() => {
    setState([
      {
        backgroundColor: "rgba(75,192,192,1)",
        borderColor: "rgba(0,0,0,1)",
        borderWidth: 2,
        data: [totalIne, Balance, Expenses],
      },
    ]);
  }, [totalIne, Balance, Expenses]);

本文标签： javascriptHow to update State of chartjs in ReactStack Overflow