How to Update chart in react-chartjs-2?

Question

I call the update() function, but it does not work.

TypeError: line.update is not a function.

Why is update() not a function?

I have seen this example on http://jsfiddle.net/zpnx8ppb/26/ where the update function does work

Here is my code:

import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js';

const line = {
    labels: [],
    datasets: [
       {
          label: 'My First dataset',
          fill: false,
          data: []
       }
    ]
};

setInterval(function(){
    line.labels.push(Math.floor(Math.random() * 100));
    line.datasets[0].data.push(Math.floor(Math.random() * 100));
    line.update();
}, 5000);

class LineChart extends Component {
    render() {
        return (
            <div className="chart">
                <Line
                    data={this.state}
                    height={5}
                    width={20}
                />
            </div>          
        )
    }
}

export default LineChart;

line you are trying to update is an object. set the ref for the `Line` component and try to update that ref. ( this is just a guess because I never used react-chartjs before ) — bennygenel, Sep 05 '17 at 10:59
`const line = {` -> `line.update()` there is not function defined update in the lin object that you made yourself — DarkMukke, Sep 05 '17 at 11:04

Dhruv Verma · Answer 1 · 2019-05-28T06:02:46.140

18

So according to https://www.npmjs.com/package/react-chartjs-2

One can access the chart reference using a ref such as

chartReference = {};

componentDidMount() {
  console.log(this.chartReference); // returns a Chart.js instance reference
}

render() {
  return (<Doughnut ref={(reference) => this.chartReference = reference } data={data} />)
}

So what you could do is put a ref in your Chart and access it wherever you like.

<Line
     data={this.state}
     height={5}
     width={20}
     ref = {(reference) => this.reference = reference}
/>

In the method you wish to cause the update you could access this reference and it's chartInstance and call the update function on this instance.

let lineChart = this.reference.chartInstance
lineChart.update();

edited May 28 '19 at 06:02

answered May 08 '19 at 04:55

Dhruv Verma

420
5
13

1

Does this still apply today with react-chartjs-2? I'm attempting to get my linecharts to destroy when the api data changes and I'm attempting this method but getting chartReference is undefined – Alex Aug 05 '21 at 14:52
I am not really sure if it applies till now. I would recommend either checking their documentation again else just trying to see the Javascript object and determining if this still applies. – Dhruv Verma Sep 22 '21 at 14:15
2

@Alex It still works but in my code I had to change the last piece of code calling the function update() directly from the reference. So it's simply `this.reference.update();` – samUser1 Nov 29 '22 at 17:22

score 2 · Accepted Answer · answered Sep 05 '17 at 11:24

You need to update the chart, line is just a config setting on the chart, this update needs to flow back to the handler

To set you on the right path, here is an example of what I mean

var config = {};

class Chart extends Component {
    constructor() {
        super();
        this.ctx = document.getElementById(this._rootNodeID).getContext("2d");
        this.chart = new Chart(ctx, config);

    }


    changeHandler(value) {
        this.chart.update();
    }

    render() {
        return (
            <canvas id={this._rootNodeID}>
                <LineChart value={this.state.value} 
                           config={this.config} 
                           onChange={this.changeHandler}/>
            </canvas>
        );
    }
}


const line = {
    labels: [],
    datasets: [
        {
            label: 'My First dataset',
            fill: false,
            data: []
        }
    ]
};



class LineChart extends Component {

    constructor(props) {
        super(props);

        this.props.config = line;
        setInterval(function(){
            this.props.config.labels.push(Math.floor(Math.random() * 100));
            this.props.config.datasets[0].data.push(Math.floor(Math.random() * 100));
            this.props.changeHandler();
        }, 5000);

    }


    render() {
        return (
            <div className="chart">
                <Line
                    data={this.state}
                    height={5}
                    width={20}
                />
            </div>
        )
    }
}

export default Chart;
export default LineChart;

score 0 · Answer 3 · answered Mar 04 '19 at 21:56

0

I recommend do not use setInterval, try to pas instance of chart to the dispatcher etc, and update it when request is done

   ChartJS.data = response.data;
   ChartJS.update();

answered Mar 04 '19 at 21:56

dmitri

460
5
11

How to Update chart in react-chartjs-2?

3 Answers3

Linked