9

I have the data already for the chart, I need to not get the warning in the chart. need not destroy the chart. with out destroying the the chart the date to be updated. i used myChart(update); but this will not work is there any other way to solve the above error.

const TapsGraphCard = (props: any) => {
  var table = "myChart";
  var myChart = new Chart(table, {
    type: "bar",
    data: {
      labels: [
        "Day 1",
        "Day 2",
        "Day 3",
        "Day 4",
        "Day 5",
        "Day 6",
        "Day 7",
        "Day 8",
        "Day 9",
        "Day 10",
      ],
      datasets: [
        {
          label: "no.of Taps",
          data: [32, 256, 144, 168, 248, 96, 144, 168, 40, 144],
        },
      ],
    },

    options: {
      
      scales: {
        x: {

          display: false,
          grid: {
            display: false
          }
        },
        y: {

          display: false, 
          grid: {
            display: false
          }
        }
      },
    }
  });

  return (
    <div className="insights-container p-3">
      <div className="blue-heading">No. of Taps</div>
      <div className="description">Last 10 days</div>{" "}
      <>
      <div id="chartReport">
        <canvas id="myChart"></canvas>
        </div>
      </>
    </div>
  );
};
Kaushal Gohil
  • 3
  • 5
srinivas pendem
  • 91
  • 1
  • 1
  • 3
  • 3
    Do you mean "chartjs" instead of "chatjs"? If so, you should probably update the tag and title to get the relevant people to look at the question. – edemaine Jun 23 '21 at 14:17
  • Does this help? https://stackoverflow.com/questions/40056555/destroy-chart-js-bar-graph-to-redraw-other-graph-in-same-canvas – Daly Jun 23 '21 at 16:10

5 Answers5

11

The canvas is not destroyed when ever the component is unmounted and the ref still holds a previous value. Try this instead:

const TapsGraphCard = (props: any) => {

  useEffect(() => {
  var myChart = new Chart(table, config);

  // when component unmounts
  return () => {
      myChart.destroy()
    }
  }, [])
  
  //  ...rest of your code
};

The cleanup makes sure that when the component is unmounted the canvas is destroyed and a new instance is created once the component is mounted again.

Sdu_Max
  • 126
  • 5
6

if using react with typescript import this

import "chart.js/auto";

this will be fine for eslint @typescript

Maciej Skurznica
  • 61
  • 1
  • 3
3
var myChart = null;

const TapsGraphCard = (props: any) => 
{
    var table = "myChart";
    if(myChart){
        myChart.clear();
        myChart.destroy();
    }
    myChart = new Chart(table, {
        //rest of your code        
    });
}
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
SashA
  • 41
  • 1
  • It's important to not just post code, but to also include a description of what the code does and why you are suggesting it. This helps others understand the context and purpose of the code, and makes it more useful for others who may be reading the question or answer, – DSDmark Dec 20 '22 at 18:25
2

If you're using react-chartjs-2 make sure to add this import: import { Chart as ChartJS } from 'chart.js/auto' This fixed the issue for me. Refer to this answer: https://stackoverflow.com/a/70142666/6022510

Vic
  • 41
  • 2
0

When you are updating the chart make sure to call the this.chart.destroy() function first, This fixed the issue for me.

Nithin Samuel
  • 1
  • 3