Im trying to print Chart depends on what radio button is selected, but I dont understand why exactly I cant upload my Chart. It does print the deafultChecked Bar Chart, but when I try to select another radio button and submit form, I get an error. : Uncaught TypeError: react_chartjs_2__WEBPACK_IMPORTED_MODULE_4__.Chart.update is not a function. Tried many solutions but nothing helped.My code:

import React, { Fragment, useState } from "react";
import { Chart as ChartJS, registerables } from "chart.js";
import { Chart } from "react-chartjs-2";
import styles from "./ChartsPainter.module.css";

const ChartsPainter = (props) => {
  ChartJS.register(...registerables);
  
  const state = {
    labels: props.labels,
    datasets: [
      {
        label: "",
        backgroundColor: "#ccc",
        borderColor: "rgba(0,0,0,1)",
        borderWidth: 1,
        data: props.data,
      },
    ],
  };
 
  const options = {
    plugins: {
      legend: false,
      toolbar: false,
    },
  };
  const [type, setType] = useState("bar")
  const charTypeBar = () => {setType("bar"); ChartJS.update()};
  const charTypeLine = () => {setType("line"); ChartJS.update()};
  const charTypePie = () => {setType("pie"); ChartJS.update()};
  const charTypeDoughnut = () => {setType("doughnut"); ChartJS.update()};

  return (
    <Fragment>
      <div className={styles.painter}>
        <Chart
          type={type}
          data={state}
          options={options}
          width={7}
          height={5}
        />
      </div>
      <div className={styles.radio}>
        <input
          type='radio'
          id='bar'
          name='chart'
          defaultChecked
          onClick={charTypeBar}
        />
        <label htmlFor='bar'>Bar</label>

        <input type='radio' id='line' name='chart' onClick={charTypeLine} />
        <label htmlFor='line'>Line</label>

        <input type='radio' id='pie' name='chart' onClick={charTypePie} />
        <label htmlFor='pie'>Pie</label>

        <input
          type='radio'
          id='doughnut'
          name='chart'
          onClick={charTypeDoughnut}
        />
        <label htmlFor='doughnut'>Doughnut</label>
      </div>
    </Fragment>
  );
};

export default ChartsPainter;

CodePudding user response：

Maybe this method can solve you problem. But I dont know that it's good coding or not.

First of all you use useEffect

  const [type, setType] = useState("bar");

  useEffect(() => {
    setType(type);
  }, [type]);

  const charTypeBar = () => {
    setType("bar");
  };
  const charTypeLine = () => {
    setType("line");
  };
  const charTypePie = () => {
    setType("pie");
  };
  const charTypeDoughnut = () => {
    setType("doughnut");
  };

With Inside of dependencies ([type]) you can update the chart.

And component

    <Fragment>
      <div>
        {type === "bar" && <Bar data={state} options={options} width={7} height={5} />}
        {type === "line" && <Line data={state} options={options} width={7} height={5} />}
        {type === "pie" && <Pie data={state} options={options} width={7} height={5} />}
        {type === "doughnut" && <Doughnut data={state} options={options} width={7} height={5} />}
      </div>
      <div>
        <input type="radio" id="bar" name="chart" defaultChecked onClick={charTypeBar} />
        <label htmlFor="bar">Bar</label>

        <input type="radio" id="line" name="chart" onClick={charTypeLine} />
        <label htmlFor="line">Line</label>

        <input type="radio" id="pie" name="chart" onClick={charTypePie} />
        <label htmlFor="pie">Pie</label>

        <input type="radio" id="doughnut" name="chart" onClick={charTypeDoughnut} />
        <label htmlFor="doughnut">Doughnut</label>
      </div>
    </Fragment>

Due to this component you have to change import

import { Line, Bar, Doughnut, Pie } from "react-chartjs-2";