eChart tooltip error (TypeError) when mychart.dispose command is included

[tayyeowleng]

Version

5.4.3

Link to Minimal Reproduction

NA

Steps to Reproduce

_parentElement = document.querySelector('.main__table');

createChart(data) {
// Create the echarts instance
let myChart = echarts.getInstanceByDom(this._parentElement); //get any chart instance if it exist
console.log(myChart);

//Any existing chart has to be destroyed before a new one can be initialized
if (myChart != null && myChart != '' && myChart != undefined) {
  myChart.dispose();
  myChart = null;
}

// Initialize a new chart
myChart = echarts.init(this._parentElement, {
  width: 1000,
  height: 400,
});

let option = {
  title: {
    text: 'Monthly Sales',
    fontFamily: 'Nunito Sans',
  },
  tooltip: {},
  legend: {},
  dataset: {
    dimensions: ['Date', 'Sales'],
    source: data,
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'bar',
    },
  ],
};
// All the above is applied to the chart
myChart.setOption(option);

}
}

Current Behavior

When I perform a mychart.dispose(), I encounter the below error. However when I remove the option = {tooltip: {}), it works without error.

TypeError: Cannot read properties of null (reading 'removeChild')
at TooltipHTMLContent.dispose (TooltipHTMLContent.js:452:35)
at TooltipView.dispose (TooltipView.js:819:18)
at echarts.js:1082:7
at Array.forEach ()
at each (util.js:205:13)
at ECharts.dispose (echarts.js:1081:7)
at ChartView.createChart (chartView.js:25:15)
at controlCharts (mainController.js:258:15)

Expected Behavior

mychart.dispose() should not result in any tooltip error

Environment

- OS: Windows
- Browser: Chrome
- Framework: Javascript

Any additional comments?

No response

[plainheart]

Thanks for your feedback. Could you please provide an online demo with Codepen or any other editor?

[echarts-bot]

@tayyeowleng Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.

[tayyeowleng]

Hi I tried but when i initialize a chart in codepen or jsfiddle, it does not need me to do a chart.dispose(), before I initialize again. Thus I am not able to show the error

[tayyeowleng]

Dispose and Rebuild of the Container Node
We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.

Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.

The correct way is, call echartsInstance.dispose to dispose the instance after the container was disposed, and call echarts.init to initialize after the container was added again.

Tips: Call echartsInstance.dispose to release resources while disposing the node to avoid memory leaks.

[plainheart]

One way is to call dispose before the container node is removed. Adding a check for the existence of the parent element of the tooltip element before removing may be more robust. https://github.com/apache/echarts/blob/master/src/component/tooltip/TooltipHTMLContent.ts#L523

[tayyeowleng]

Sorry I am not clear what changes I need to do to resolve the issue. Please help to enlighten.....

[tayyeowleng]

Am I understanding correctly that this is identified as an issue under tooltip and will be fixed? Thank you!

[plainheart]

Yes. I added a non-null check in #19265 to avoid the error.

[tayyeowleng]

Is the fix already committed? which version of echart will it be? Thank you all!

[plainheart]

It will be in the next version v5.5.0.

[tayyeowleng]

Hi may I check if this is solved in v5.5.0? Thanks!