The Canvas remains active even after calling destroy() and navigating away from the page, it still retains any added data upon returning

Encountering the error message "Canvas is already in use. Chart with ID ' ' must be destroyed before the canvas with ID 'MyChart' can be reused." pops up 4/5 times for each specific id in the console. Interestingly, when staying on the page and adding data, the error doesn't show up. However, if navigating to another page and returning to this component to add data, the error reappears.

if (this.chart){
        this.chart.destroy(); 
        }  
this.chart = new Chart('MyChart', {
    type: 'line',
     data: {
     labels: monthLabels,
     datasets: [
      {
        label: 'Weight',
        data: weightLabels,
        backgroundColor: 'blue',
      },
    ],
  },
  options: {
    aspectRatio: 2.5,        
  },
}); 

Answer №1

Replace the if condition with this code snippet

const myChart = Chart.getChart('MyChart');
myChart?.destroy();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering difficulties while attempting to deploy image on kubernetes due to issues with packaging structure

After successfully building with the dockerfile provided below, I encountered an issue when trying to deploy my application on EKS. FROM node:12 # Create app directory WORKDIR /usr/src/app COPY udagram-feed/package*.json ./ RUN npm ci # Bundle app sou ...

Oh no! A catastrophic NG_BUILD error has occurred: The mark-compacts are not working effectively due to an allocation failure near the heap limit. The JavaScript

While working on my Angular application, I keep encountering a JavaScript out of memory issue as indicated below: @bb-cli/bb-ang] ERR! NG_BUILD FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory I&apo ...

Encountering the npm ERR! ERESOLVE error while trying to npm install in my Node project has been a frustrating issue

Upon running npm install in my project, I encountered the following error: npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While ...

Error message: The function URL.createObjectURL is not recognized in this context | Issue with Antd charts

Currently, I am working on integrating charts from antd into my TypeScript application. Everything runs smoothly on localhost, but as soon as I push it to GitHub, one of the tests fails: FAIL src/App.test.tsx ● Test suite failed to run TypeError: ...

What is the best approach for filtering a nested array in this scenario?

Here is the response I am getting: let m = [ { name: 'Summary', subListExpanded: false, subList: [ ] }, { name: 'Upload', subListExpanded: false, subList: [ ...

Angular unable to retrieve data using Angularfire2

Having trouble retrieving data from the Real time Database on firebase. Read and Write permissions are set to public so no authentication is needed. The npm compilation is successful, indicating that the Angular-CLI code is correct. Following the document ...

Error with Firebase authentication on a Next.js project using TypeScript

I recently started a personal project using Next.js, Typescript, and Firebase for authentication and database management. While working on a sign-in page with Google integration, I encountered an error labeled as auth/argument-error. According to the Fireb ...

Leveraging jQuery within a webpack module shared across multiple components, located outside the webpack root directory

When working with multiple layouts that rely on shared typescript files, it is important to ensure these files are accessible across different layouts using webpack. While attempting to include jquery in my ajax.ts, I encountered the following error: ERR ...

Troubleshooting the error message: "Uncaught TypeError: this.schedulerActionCtor is not a constructor" that occurs while executing the rootEpic in redux-

As I delve into learning how redux-observables work with typescript, I've been following a project example and referencing various guides like those found here and here. However, no matter what I try in setting up the epics/middleware, I keep encounte ...

Having trouble with unresponsive pages when adjusting filters

My page loads dynamic charts from an API, each chart represents different equipment such as A01, A02, etc. These charts display uptime and downtime data with over 300 records. However, when I change the filter to yearly, which fetches more records from th ...

6 Ionic date-time selector

I seem to be encountering some challenges while using Ionic 6 with the new date-time picker. The issue arises when I retrieve a value from the database through a nest service. In the database, the date appears as: “2022-06-30 13:11:54” but upon retriev ...

What are the best ways to utilize @types/bootbox and @types/jquery?

Is there a way to incorporate @types/bootbox and @types/jquery into an Angular 4 project? I attempted the following: npm install @types/bootbox and in my code, I am implementing it like so: import * as bootbox from 'bootbox'. However, I encou ...

Combine the fileReplacement property from two separate Angular configurations

When working with multiple angular configurations, I often combine them to create different builds. However, one issue I encounter is that the fileReplacements attribute from each configuration does not merge properly. Instead, the last configuration speci ...

"Potential Memory Leak Issue: Assigning dataUrl to img.src May Cause Memory

Here is a demonstration of a simple test case where setting an img tag's src to different dataUrls leads to memory leakage. It appears that the image data is not unloaded even after the src is changed. <!DOCTYPE html> <html> <head> ...

Create type definitions for React components in JavaScript that utilize the `prop-types` library

Exploring a component structure, we have: import PropTypes from 'prop-types'; import React from 'react'; export default class Tooltip extends React.Component { static propTypes = { /** * Some children components */ ...

Issue with VueJS 2 and TypeScript: computed value unable to recognize property specified in data object

When creating the following component: <template lang="html"> <div> <p>{{ bar }}</p> </div> </template> <script lang="ts"> import Vue from 'vue'; export const FooBar = Vue.ex ...

Changing the tag value within a directive

Imagine you have the following template: <p title>Hello Universe</p> How can I dynamically replace "Hello Universe" with a different string using a directive? I attempted the following approach, but it was not successful: @Directive({ sel ...

Having trouble with errors when adding onClick prop conditionally in React and TypeScript

I need to dynamically add an onClick function to my TypeScript React component conditionally: <div onClick={(!disabled && onClick) ?? undefined}>{children}</div> However, I encounter the following error message: Type 'false | (() ...

The parameter type '{ src: string; thumb: string; }' cannot be assigned to the 'never' type in the argument

Sample Typescript Code: I am experiencing issues with my code and cannot comprehend this error message- Argument of type '{ src: string; thumb: string; }' is not assignable to parameter of type 'never' _albums = []; constructor( ...

After updating NodeJS from version 8.11.1, it appears that the program is no longer functioning properly

Deciding to upgrade my nodejs version from 8.11.1 to 10.15.3, I downloaded the v10.15.3-x64.msi file on my Windows 10 system. Upon creating a fresh Angular application using the "ng new" command, I encountered the "HTTP ERROR 400" page with no errors in th ...