user input to create pie chart using reactjs from form

Question

how to create chart taking input from the user from a form in reactjs

I made a form and pie chart not getting an idea of how to access data from a form

chartData:{
        datasets:[{
              data:[10,20,30,40,50]
                  }]
           }

i want the chart to be created by the inputs form the form

which liberary you are using for chart

Sanaullah
– Sanaullah

2019-07-16 11:10:04 +00:00
Commented Jul 16, 2019 at 11:10 — Sanaullah
– Sanaullah, Commented Jul 16, 2019 at 11:10
react-chartjs-2

Divya
– Divya

2019-07-16 11:12:07 +00:00
Commented Jul 16, 2019 at 11:12 — Divya
– Divya, Commented Jul 16, 2019 at 11:12
I had added the code use it will work for you

Sanaullah
– Sanaullah

2019-07-16 11:58:32 +00:00
Commented Jul 16, 2019 at 11:58 — Sanaullah
– Sanaullah, Commented Jul 16, 2019 at 11:58

Divya · Accepted Answer · 2019-07-17 10:27:53Z

1

export default class App extends Component {
    state = {
        dataPie: {
            datasets: [{
                data: [10, 20, 30]
            }],

        },
        first: "",
        second: "",
    }
    handleSubmit = () => {
        const { dataPie } = this.state;
        this.setState({
            dataPie: {
                ...dataPie,
                datasets: [{
                    ...dataPie.datasets,
                    data: [...dataPie.datasets[0].data,
                    this.state.first, this.state.second]
                }]
            }
        })
    }
    handleChange = (evt) => {
        let a = parseInt(evt.target.value)
        this.setState({
            [evt.target.name]: a,
        })
    }
    render() {


        const { data, dataPie } = this.state;
        console.log(dataPie);
        return (
            <React.Fragment>
                <input type="number"
                    value={this.state.first}
                    name="first"
                    onChange={(evt) => this.handleChange(evt)} />
                <input type="number"
                    value={this.state.second}
                    name="second" onChange={(evt) => this.handleChange(evt)} />
                <button onClick={() => this.handleSubmit()}>add data to chart</button>
                <h1>pie chart</h1>
                <Pie data={dataPie} />
            </React.Fragment>

        )
    }
}

answered Jul 17, 2019 at 10:27

Divya

315 bronze badges

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

4 Comments

Divya Over a year ago

I tried to do polar chart using this codes it is working properly with few changes but now I want the circles in polar chart should be 10 each containing value 10. the input entered for one slice should be in one color the remaining should be of other color.eg: if my input value of 1 slice is 100 out of 10 the remaining 90 of that single slice should be of another color this should be done for my 5 inputs

Divya Over a year ago

I want something similar to this given link miro.medium.com/max/982/1*7q-Pe76n2lvvIfqWmlyiNg.jpeg

Divya Over a year ago

how to add two data field to a single label but one should remain default 10 and other should change according to my input given through input field

Divya Over a year ago

for a polar chart using reactjs

Sanaullah · Accepted Answer · 2019-07-20 18:05:31Z

1

Use the following code will generate a dynamic chart

import React, { Component } from "react";
import {  Pie } from "react-chartjs-2";


export default class App extends Component {
    state = {
        dataPie: {
            datasets: [{
                data: [10, 20, 30]
            }],

        },
        first: "",
        second: "",
    }
    handleSubmit = () => {
        const { dataPie } = this.state;
        this.setState({
            dataPie: {
                ...dataPie,
                datasets: [{
                    ...dataPie.datasets,
                    data: [
                    this.state.first,
                     this.state.second
                       ]
                }]
            }
        })
    }
    handleChange = (evt) => {
        let a = parseInt(evt.target.value)
        this.setState({
            [evt.target.name]: a,
        })
    }
    render() {


        const { data, dataPie } = this.state;
        console.log(dataPie);
        return (
            <React.Fragment>
                <input type="number"
                    value={this.state.first}
                    name="first"
                    onChange={(evt) => this.handleChange(evt)} />
                <input type="number"
                    value={this.state.second}
                    name="second" onChange={(evt) => this.handleChange(evt)} />
                <button onClick={() => this.handleSubmit()}>add data to chart</button>
                <h1>pie chart</h1>
                <Pie data={dataPie} />
            </React.Fragment>

        )
    }
}

edited Jul 20, 2019 at 18:05

answered Jul 16, 2019 at 11:57

Sanaullah

3746 silver badges11 bronze badges

13 Comments

Divya Over a year ago

I don't want a static value. In this (data:[10,20,30,40,50],) i want the value which i enter through input fields

Sanaullah Over a year ago

@Divya I have added the code that dynamically update the chart using inputs

Divya Over a year ago

Thank you so much for your help. Please keep on guiding us

Sanaullah Over a year ago

if this code help you then please accept it as answer

Divya Over a year ago

Thank u so much @Sanaullah.U gave me a very big solution to my problem.Thank u once again

|

Divya · Accepted Answer · 2019-07-17 12:28:12Z

0

data: [...dataPie.datasets[0].data, this.state.first, this.state.second] }]change this to data: [ this.state.first, this.state.second] }]

answered Jul 17, 2019 at 12:28

Divya

315 bronze badges

Collectives™ on Stack Overflow

user input to create pie chart using reactjs from form

3 Answers 3

4 Comments

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related