Tooltip throws "Cannot read properties of null (reading 'getParsed')" after a responsive chart's canvas is detached

未关闭 适合新手
  • 哪里不对？
#12,397 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
82/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
javascript
领域
data-visualization, frontend

调研方向

从 src/plugins/plugin.tooltip.js 开始，检查 Tooltip._getActiveElements；issue 指出它是失效的过滤器。将现有的 dataset 检查与针对已分离图表所描述的 controller 生命周期进行比较。使用提供的页面以及一个在分离期间排队的指针事件重现问题。分离后事件不再抛出错误，并且 tooltip 在已连接的图表上仍能正常工作时，即为完成。

由索引模型根据 Issue 内容生成。

描述

Expected behavior

A pointer event that reaches a chart after its canvas leaves the DOM does nothing.

Current behavior

The tooltip throws:

TypeError: Cannot read properties of null (reading 'getParsed')
    at Tooltip._getActiveElements (plugin.tooltip.js)
    at Tooltip.handleEvent
    at Object.afterEvent
    at Chart._eventHandler
    at listener
    at platform.dom.js (throttled proxy, requestAnimationFrame)

When a responsive chart's canvas is detached, the detached handler in bindResponsiveEvents calls this._stop(), which destroys every dataset meta, and then _resize(0, 0). The user event listeners stay bound and chart.ctx stays set, so the chart.ctx !== null check in createProxyAndListen lets a pointer event that was queued for the next frame through.

The tooltip still holds its last active elements. The chart is now 0×0, so the event is outside the chart area, and _getActiveElements filters lastActive:

return lastActive.filter(i =>
  this.chart.data.datasets[i.datasetIndex] &&
  this.chart.getDatasetMeta(i.datasetIndex).controller.getParsed(i.index) !== undefined
);

The dataset is still in chart.data.datasets, so getDatasetMeta() builds a new meta with controller: null, and .getParsed() throws.

#11596 added the datasets[i.datasetIndex] check for a dataset that was removed. This is a case where the dataset is still there but its controller is gone.

Reproducible sample

Self-contained page:

<div id="wrap" style="width:400px;height:300px"><canvas id="c"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script>
  const chart = new Chart(document.getElementById('c'), {
    type: 'bar',
    data: { labels: ['a', 'b', 'c'], datasets: [{ label: 'x', data: [3, 5, 2] }] },
    options: { animation: false },
  });
  const pointAtBar = () => {
    const rect = chart.canvas.getBoundingClientRect();
    const bar = chart.getDatasetMeta(0).data[1];
    chart.canvas.dispatchEvent(new MouseEvent('mousemove', {
      clientX: rect.left + bar.x,
      clientY: rect.top + bar.y + 5,
    }));
  };
  const frame = () => new Promise((resolve) => requestAnimationFrame(resolve));

  (async () => {
    await frame();
    await frame();
    pointAtBar(); // the tooltip becomes active
    await frame();
    await frame();
    pointAtBar(); // throttled: runs on the next frame
    document.getElementById('wrap').remove(); // detach: chart._stop()
  })();
</script>

The second event runs after the detach and throws.

Optional extra steps/info to reproduce

In an app, this happens when a framework removes a chart from the page while the pointer is over it and destroys the chart a little later. Examples are a route transition, or vue-chartjs's destroyDelay, which keeps the chart alive for a short time after its component unmounts. We see it in production from Chrome 156 on Windows.

Possible solution

Skip a meta that has no controller in the filter:

return lastActive.filter(i => {
  const { controller } = this.chart.getDatasetMeta(i.datasetIndex);

  return this.chart.data.datasets[i.datasetIndex]
    && controller
    && controller.getParsed(i.index) !== undefined;
});

Another option is to clear the active elements of the chart and the tooltip in _stop(), so nothing refers to a destroyed controller.

Context

No response

chart.js version

v4.6.1 (the same code is on master, src/plugins/plugin.tooltip.js)

Browser name and version

Chrome 156; also reproduced in headless Chromium

Link to your project

No response

主要语言
JavaScript
星标
67.8k
派生
12k
平均合并
6 小时 15 分钟
30 天内合并 PR
3

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

chartjs/Chart.js 的其他 Issue

查看 chartjs/Chart.js 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。