Facing "this.legend.destroy is not a function" when component unmounts

[shivangkumar]

Context:

One of the pages of the app I am working on has a list of components displaying some sort of data. Each list item makes a request for data to an API and uses the response to make a chart. Users can switch to different tabs on the page (implemented using react router) that show different dashboards.

Issue:

There seems to be somewhat of a race condition. When the user opens the page with the charts while the data is being loaded from the API, if the user switches to a different tab then it is possible that though the legend exists as a part of the chart object, the destroy method has not been assigned yet.

Consequences:

As a result, when switching to a different page the console shows the following error:
TypeError: this.legend.destroy is not a function

Solution

I was able to bypass the issue by using a simple check before clearing the chart and made the pull request here

@Pauan @amcharts

[Pauan]

@shivangkumar Thanks for the report!

Do you have a codepen (or a github repo) which reproduces this error? It would help a lot with fixing it.

[KristenWilde]

I get this error quite often as well. I really have no idea why - I suspect it may have something to do with the fact that we update the data frequently (with websockets). I believe it can be fixed easily by changing this.legend.destroy() to this.legend.destroy && this.legend.destroy().