How to fetch data for chart js Pie Chart from State in React js?

Question

As I am new to react i have been struggling to pass data from my state to the chartjs dynamically...what I need is when ever user updates the Textbox and asks for the Output, the Pie chart should update itself automatically according to the output...i have stored the output values in the state but Pie chart is not allowing me to Pass state as data...

Here's a Link to the Code Sandbox https://codesandbox.io/s/autumn-mountain-sv1qk?fontsize=14&hidenavigation=1&theme=dark

 class Buyer extends Component {

        constructor(props) {
            super(props);
            this.state = {
                income: 100000,
                percent: 13,
                totalTax: '',
                grossPrice: '',
                otherValues: '',
            }
        }






PieChart = (Gross,totalTax) => {
    let GrossPrice = Gross  ;
    let TotalTax = totalTax ;
    let data = [GrossPrice,TotalTax]
    let Pie = {
            labels: ['Total Tax', 'Gross Price'],   
            datasets: [{
                data: data,
                backgroundColor: [
                    '#1ca5b6',
                    '#89ba2b',
                ],

            }]

        }

    }



handleIncome = (event) => {
    let income = event.target.value
    this.handleData(income, this.state.percent)
    console.log(this.state)

}

handlePercent = (event) => {
    let Percent = event.target.value
    this.handleSliderData(this.state.income, Percent)

}


// From Slider
sliderIncome = (event) => {
    this.setState({ income: event })
    this.handleSliderData(event, this.state.percent)
    // console.log(this.state)

}

sliderPercent = (event) => {
    this.setState({ percent: event })
    this.handleSliderData(this.state.income, event)

}


handleData = (income, Percent) => {
    this.setState({
        income: income,
        percent: Percent,
        totalTax: //some Calculations
        grossPrice: //some Calculations
        otherValues: //some Calculations

    })



    console.log(this.state)
}




handleSliderData = (income, Percent) => {
    this.setState({
        income: income,
        percent: Percent,
        totalTax: //some Calculations
        grossPrice://some Calculations
        otherValues://some Calculations
    })
    this.PieChart(this.state.grossPrice,this.state.totalTax)
    // console.log(this.state)

}


render() {
            return ( 
              <div>
                    <div >
                        <Card s>
                            <PieChart data={this.PieChart} width={600} height={300} />
                        </Card>
                    </div>
                </Col>

              )
     }

I have tried creating a function for the pie chart but was not able to get through...any help would be appreciated..thanks!!

Hello Rajat, When rendering the props you're passing "data" with the value "this.pieChart" will basically return undefined as method "pieChart" need "Gross,totalTax" as params. If you can show a live demo of what is happening exactly then it will be easier to dubug. — Sohan
– Sohan, Commented Feb 16, 2020 at 16:34
Hi sohan...is it ok if i added the whole code so that you can take a look...i cannot figure out how to add live demo and its really urgent.. — Rajat
– Rajat, Commented Feb 16, 2020 at 16:47
I have updated the question sohan... Here's the sandbox link codesandbox.io/s/… — Rajat
– Rajat, Commented Feb 16, 2020 at 17:41
I have updated the sandbox you have shared. Hope this is what you need. — Renji Joseph Sabu Niravath
– Renji Joseph Sabu Niravath, Commented Feb 16, 2020 at 18:25

Renji Joseph Sabu Niravath · Accepted Answer · 2020-02-16 19:05:47Z

1

I think there are a few problems with the code. this.PieChart function doesn't return anything now. From giving the code a quick glance, I can see that you are trying to pass the props needed for the PieChart component from this.PieChart function. Return whatever you need as prop for the component and also call the function inside the JSX using parenthesis, passing the needed parameters into the function.

PieChart = (Gross,totalTax) => {
let GrossPrice = Gross  ;
let TotalTax = totalTax ;
let data = [GrossPrice,TotalTax]
let Pie = {
        labels: ['Total Tax', 'Gross Price'],   
        datasets: [{
            data: data,
            backgroundColor: [
                '#1ca5b6',
                '#89ba2b',
            ],

        }]

    }

}
return Pie; //or whatever data you need for the component

Also,

 <PieChart data={this.PieChart(this.state.grossPrice, this.state.totalTax)} width={600} height={300} />

Also, keep in mind to use proper naming conventions. Functions should be in camel case( this.PieChart should be named this.pieChart ). Try using different names for the component and function. This shall solve a lot of problems you might run into

Update: I have updated the sandbox you have shared. Hope this helps. https://codesandbox.io/s/friendly-mahavira-79n2s

edited Feb 16, 2020 at 19:05

answered Feb 16, 2020 at 17:30

Renji Joseph Sabu Niravath

1371 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rajat Over a year ago

hey..the pie is still glitching and updating the same values...but I think I can work from here...thank you for your time...

Renji Joseph Sabu Niravath Over a year ago

I wasn't completely sure about your requirement. Did try to clear away some errors i saw.

Rajat · Accepted Answer · 2020-02-17 12:59:18Z

I think i found the solution for the particular problem...i order to update the data in the piechart dynamically using state we have create a state in the constructor(props) like so...

constructor(props) {
        super(props);
        this.state = {
            income: '',
            percent: '',
            totalTax: '',
            grossPrice: '',
            otherValues: '',
            Data: {} 
        }

    }

Then i have used componentDidMount() to mount the initial state of the PieChart like So....

componentDidMount() {

        let runscore = [100,200];



        this.setState(
            {
                Data: {
                    labels: [
                        'Purple',
                        'Yellow',

                    ],
                    datasets: [
                        {

                            data: runscore,
                            backgroundColor: [
                                '#1ca5b6',
                                '#89ba2b',

                            ]
                        }
                    ]
                }
            });


    }

then i created a function PieChart = (Gross,totalTax) that fetches data from another functions and used that to set state in Data like so...

PieChart = (Gross,totalTax) => {
        let runscore = [Gross,totalTax];
        this.setState({
            Data: {
                labels: [
                    'Gross Price',
                    'Total Tax',

                ],
                datasets: [
                    {
                        data: runscore,
                        backgroundColor: [
                            '#1ca5b6',
                            '#89ba2b',
                        ]
                    }
                ]
            }
        });


        }

For now this is not updating the state in sync with the current state but i gets the work done...i hope this helps others...

Collectives™ on Stack Overflow

How to fetch data for chart js Pie Chart from State in React js?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related