Tooltip crash: “Cannot read … ‘dec’ ” – Solved

Tooltip crash: “Cannot read properties of undefined (reading ‘dec’)” and “reading ‘length'”

Plugin version: 1.7.11 Chart.js version: 2.8.0 (bundled with plugin) Browser: Safari / Chrome (all tested) Problem

When hovering over the elevation chart, the tooltip triggers two JavaScript errors and fails to render:

WP-GPX-Maps.js:1154 Uncaught TypeError: Cannot read properties of undefined (reading 'dec')
    at i.label (WP-GPX-Maps.js:1154:29)

Chart.min.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at i.drawFooter (Chart.min.js:7:89270)

The root cause is that the tooltip callbacks in js/WP-GPX-Maps.js do not guard against undefined entries in the _formats array. When tooltipItem.datasetIndex references a dataset that has no corresponding entry in _formats, accessing .label_y.dec throws. This then cascades into Chart.js’s drawFooter, which receives undefined instead of an array. Fix

Three null-checks are needed in the tooltips.callbacks object (around line 1140):

1. title callback — guard _formats[0]:

// Before:
var label_x = _formats[0].label_x;

// After:
var _fmt0 = _formats[0]; if (!_fmt0 || !_fmt0.label_x) return ""; var label_x = _fmt0.label_x;

2. label callback — guard _formats[tooltipItem.datasetIndex]:

// Before:
var label_y = _formats[tooltipItem.datasetIndex].label_y;

// After:
var _fmtY = _formats[tooltipItem.datasetIndex]; if (!_fmtY || !_fmtY.label_y) return label; var label_y = _fmtY.label_y;

3. footer callback — guard tooltipItem[0]:

// Before:
var i = tooltipItem[0].index;

// After:
if (!tooltipItem || !tooltipItem[0]) return; var i = tooltipItem[0].index;

File: wp-content/plugins/wp-gpx-maps/js/WP-GPX-Maps.js

These guards prevent the crash when a dataset index has no matching format entry, and when the footer receives an empty tooltip array. The tooltip simply skips rendering for that data point instead of crashing the entire chart.