Chart update

UI Components for React
Post Reply
YourJest
Posts: 2
Joined: 02 May 2017, 18:00

19 Sep 2017, 00:38

Hello! I want to update my chart but I don't know how to do this in a proper way. And what does the "refresh" method means?

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

19 Sep 2017, 11:36

Fixed on the new version. Please see;
https://github.com/primefaces/primereact/issues/102

Exp;

Code: Select all

import React, {Component} from 'react';
import {Chart} from 'primereact/components/chart/Chart';
import {Button} from 'primereact/components/button/Button';

export class PieChartDemo extends Component {

    constructor(props) {
        super(props);
        this.state = {data: null};
    }
    
    componentDidMount() {
        var _data = {
            labels: ['A','B','C'],
            datasets: [
                {
                    data: [300, 50, 100],
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]    
            };

        this.setState({data: _data});
    }

    addNewData() {
        let _data = {...this.state.data};

        _data.labels.push('D');
        _data.datasets[0].data.push('40');
        _data.datasets[0].backgroundColor.push("#000000");
        _data.datasets[0].hoverBackgroundColor.push("#000000");
        this.setState({data: _data});
    }
    
    render() {
        return (
            <div>
                    <Chart type="pie" data={this.state.data} />

                    <Button label="Add New Data" onClick={this.addNewData.bind(this)} />
            </div>
        )
    }
}

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests