How to update dynamically chartsjs in react?

Question

I try to connect react-chartjs-2 with calculator. My script works partially, because it took date but only in first render.

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: `'top' as const`,
    },
    title: {
      display: true,
      text: 'Chart.js Line Chart',
    },
  },
};

const labels = ["rok1", "rok2", "rok3", "rok4", "rok5", "rok6", "rok7", "rok8", "rok9", "rok10", "rok11", "rok12", "rok13", "rok14", "rok15", "rok16", "rok17", "rok18", "rok19", "rok20", "rok21", "rok22", "rok23", "rok24", "rok25"];
const latawzrostu = [];
const cenywzrostu = [];
const poprawa = [];
export const data = {
  labels,
  datasets: [
    {
      label: `Wzrost cen prądu o ${poprawa} %`,
      data: latawzrostu,
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
    },
    {
      label: 'Dataset 2',
      data: cenywzrostu,
      borderColor: 'rgb(53, 162, 235)',
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
    },
  ],
};

I want to inform the chart that there is something change in state

useMemo(()=>{
poprawa.push(po)
latawzrostu.push(peso, rok1, rok2, rok3, rok4, rok5, rok6, rok7, rok8, rok9, rok10, rok11, rok12, rok13, rok14, rok15, rok16, rok17, rok18, rok19, rok20, rok21, rok22, rok23, rok24);
cenywzrostu.push(cena1, cena2, cena3, cena4, cena5, cena6, cena7, cena8, cena9, cena10, cena11,cena12, cena13, cena14, cena15, cena16, cena17,cena18, cena19, cena20, cena21, cena22, cena23, cena24,cena25);
}, [altura, peso, pop])

but any hook I used, not worked. What's more I have problem with const poprawa cause I want to display it on label. It work only I hardcode this thing like poprawa = 5; but I can find way to send there value dynamically; I try with push and array, but not works.

Update. I read documentation and change approach but not result is given back

function adddata(e){
  setPeso( e.target.value);
  poprawa.push(po)
data.datasets[0].data[2] = [peso, rok1, rok2, rok3, rok4, rok5, rok6, rok7, rok8, rok9, rok10, rok11, rok12, rok13, rok14, rok15, rok16, rok17, rok18, rok19, rok20, rok21, rok22, rok23, rok24];
cenywzrostu.push(cena1, cena2, cena3, cena4, cena5, cena6, cena7, cena8, cena9, cena10, cena11,cena12, cena13, cena14, cena15, cena16, cena17,cena18, cena19, cena20, cena21, cena22, cena23, cena24,cena25);

ChartJS.update();
}

Answer 1

Finally I handle it. To future generator of programmer. M?k? Graph like child component and set date by props.

  var chart1 =  [peso, rok1, rok2, rok3, rok4, rok5, rok6, rok7, rok8, rok9, rok10, rok11, rok12, rok13, rok14, rok15, rok16, rok17, rok18, rok19, rok20, rok21, rok22, rok23, rok24];
    var chart2 = [cena1, cena2, cena3, cena4, cena5, cena6, cena7, cena8, cena9, cena10, cena11,cena12, cena13, cena14, cena15, cena16, cena17,cena18, cena19, cena20, cena21, cena22, cena23, cena24,cena25];
     
return (
<Graph chart1={chart1} chart2={chart2} />
)

and in Graph.js

put there all date, dispatch props

function ({chart1, chart2}) ``` and use them as a date like
``` dat?: chart1 ``` and that's all. 

Props are something similar to state, but much easier is send them.