Chartjs-My chartJS axios.get is fired twice causing chart to render twice too and i don't know why. I'm using react-chartjs-2

0👍

Use this Approach:

export default class Graph extends Component {
    constructor(props) {
        super(props);
        this.state: {
            humidity_data
        }
          var s = true;
        if (s) {
            axios_humidity_data = () => {
                return new Promise((resolve, reject) => {
                    try {
                        axios
                            .get(
                                `url'`
                            )
                            .then(response => {
                                const data = response.data.results[0].series[0].values;
                                let date = [];
                                let humidity = [];
                                data.forEach(chart_item => {
                                    date.push(chart_item[0]);
                                    humidity.push(chart_item[1]);
                                });
                                this.setState({
                                    humidity_data: {
                                        labels: date,
                                        datasets: [
                                            {
                                                label: "Humidity %",
                                                data: humidity,
                                            }
                                        ]
                                    }
                                });
                                console.log(data);
                                resolve(data);
                            });
                    } catch (err) {
                        reject(err);
                    }
                });
            };
        }
        s = false;
        componentDidMount() {
            this.axios_humidity_data();
        }

        render() {
            return (
                <div>
                <Line
            data={this.state.pressure_data}
            options={{
                title: {
                    display: true,
                        text: "Pressure kPa",
                },
            }}
            />
            </div>
        );
        }
    }

Leave a comment