Chart not updating after data change in React Chart.js

Question

I made a line chart with React Chart.js. The chart is working perfectly fine but when I try to update the chart, it didn't get updated. Although I am able to change the data of the chart.

I try to update the chart on the legend click. I go through some tutorials and see if update function will help me. But when I try the update function with my line, it shows an error with 'undefined update function'.

import React from "react";

import { Line } from "react-chartjs-2";

const checkinsData = {
  labels: [
    "4 P.M",
    "5 P.M",
    "6 P.M",
    "7 P.M",
    "8 P.M",
    "9 P.M",
    "10 P.M",
    "11 P.M",
    "12 A.M",
    "1 A.M",
    "2 A.M",
    "3 A.M",
    "4 A.M",
  ],
  datasets: [
    {
      label: "Day",
      backgroundColor: "blue",
      borderColor: "#333",
      borderWidth: 2,
      lineTension: 0.1,
      fill: true,
      data: [4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4],
    },
  ],
};

class CheckinGraph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  legendClick = function () {
    console.log("Legend click" + checkinsData.labels);
    checkinsData.datasets.data = [100, 120, 200, 25, 56, 78, 80, 90, 70, 100];
  };
  render() {
    return (
      <div className="col-md-12  default-shadow bg-white pd-30-0 border-radius-10 align-center">
        <Line
          redraw
          data={checkinsData}
          options={{
            title: {
              text: "Total Check-ins",
              fontSize: 20,
              display: true,
            },
            legend: {
              display: true,
              position: "top",
              onClick: this.legendClick,
            },
          }}
        />
      </div>
    );
  }
}

export default CheckinGraph;

Are you getting Legend click in console means is the function call made on onClick? — ParthS007
– ParthS007, Commented Apr 1, 2020 at 11:29
@AkshayDonga: I tend to discourage reformatting code in questions unless it is extremely unreadable. Reformatting code carries the risk that you fix or break something, which could make the problem harder for readers to solve. — halfer
– halfer, Commented Apr 29, 2024 at 14:00

Zohaib Ijaz · Accepted Answer · 2020-04-01 11:41:14Z

3

Your chart will update/re-render when your component will get new props or state will be updated. Since your chart data that you are updating it not in state of the component, so component don't know about the change and it is not re-rendering your chart. You need to tell the component that something has changed and now time to re-render. This can be achieved by: 1. adding your data in state and then updating the data on click but in a right way (without mutating the state) 2. Added a random key in state and update the state key after updating the non-state data

state = { key: Date.now() }


legendClick=function() {
        console.log("Legend click"+ checkinsData.labels);
        checkinsData.datasets[0].data=[100,120,200,25,56,78,80,90,70,100];
        this.setState({ key: Date.now() });
    }

answered Apr 1, 2020 at 11:41

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Chart not updating after data change in React Chart.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related