Cannot read properties of null (reading 'getLabelAndValue') in function createTooltipItem() of plugin.tooltip.js

[schavelev]

Expected behavior

No error message

Current behavior

Sometimes the following error occurs:
plugin.tooltip.js:123 Uncaught TypeError: Cannot read properties of null (reading 'getLabelAndValue')
at createTooltipItem (plugin.tooltip.js:123:37)
at Tooltip._createItems (plugin.tooltip.js:603:25)
at Tooltip.update (plugin.tooltip.js:645:27)
at Tooltip.handleEvent (plugin.tooltip.js:1160:14)
at Object.afterEvent (plugin.tooltip.js:1257:25)
at callback (helpers.core.ts:109:15)
at PluginService._notify (core.plugins.js:60:11)
at PluginService.notify (core.plugins.js:42:25)
at Chart.notifyPlugins (core.controller.js:1148:26)
at Chart._eventHandler (core.controller.js:1197:10)
createTooltipItem @ plugin.tooltip.js:123
_createItems @ plugin.tooltip.js:603
update @ plugin.tooltip.js:645
handleEvent @ plugin.tooltip.js:1160
afterEvent @ plugin.tooltip.js:1257
callback @ helpers.core.ts:109
_notify @ core.plugins.js:60
notify @ core.plugins.js:42
notifyPlugins @ core.controller.js:1148
_eventHandler @ core.controller.js:1197
listener @ core.controller.js:1006
(anonymous) @ platform.dom.js:243
(anonymous) @ helpers.extras.ts:40
requestAnimationFrame (async)
(anonymous) @ helpers.extras.ts:38

This error occurs when the mouse pointer is in the canvas area, but the canvas container is in the process of being destroyed.

Reproducible sample

Chart.js/src/plugins/plugin.tooltip.js

Line 123 in abbd5a7

const {label, value} = controller.getLabelAndValue(index);

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.3.0

Browser name and version

Google Chrome 113.0.5672.127

Link to your project

No response

[aeqz]

May be related to #11206. The stack trace is pretty similar, and it also happens randomly when the user is interacting with the chart during data updates.

[schavelev]

May be related to #11206. The stack trace is pretty similar, and it also happens randomly when the user is interacting with the chart during data updates.
Yes, it looks like it. In both cases, there is no check for null or undefined.

[schavelev]

Possible solution:

function createTooltipItem(chart, item) {
    const { element, datasetIndex, index } = item;
    const controller = chart.getDatasetMeta(datasetIndex).controller;
    if (controller) {
        const { label, value } = controller.getLabelAndValue(index);

        return {
            chart,
            label,
            parsed: controller.getParsed(index),
            raw: chart.data.datasets[datasetIndex].data[index],
            formattedValue: value,
            dataset: controller.getDataset(),
            dataIndex: index,
            datasetIndex,
            element
        };
    }
    else {
        return {
            chart,
            label: '',
            formattedValue: '',
            dataIndex: index,
            datasetIndex,
            element
        };
    }
}

[arisbimas]

any update? i got same issue

[joshkel]

@schavelev, you said that you're able to trigger this "when the mouse pointer is in the canvas area, but the canvas container is in the process of being destroyed" - can you give any details, or a reproducible codepen.io / codesandbox.io sample? I'm able to reproduce this error in the following circumstances, but this sounds different than what you're seeing.

1. Position the cursor over the chart area, such that it causes a tooltip to be shown.
2. Move the cursor out of the chart area, such that the tooltip remains visible.
3. Cause the chart contents to be changed, such that the dataset referenced by the active tooltip element is no longer valid.
4. Move the mouse again. This triggers an inChartArea = false event, so it reuses the previous, now invalid, active elements.