Tool Tip isn't displaying point data correctly

[PaulWieland]

Expected Behavior

The tool tip of a data point should show the x & y values of the data point.

Current Behavior

The tool tip's x value is being take from the series index number rather than from the data point x value.

Possible Solution

When a data set uses the point format type, the tooltip has to take the x/y coordinates from the point object rather than assuming that the point's index aligns with the x axis index.

Steps to Reproduce

Create an X axis label array with a few values, e.g. labels = ['January','February','March'].

Create a data series using format: 'point' and with the data having fewer points than the x axis labels, e.g. data = [{x: 'March', y: 10}]

Context

The wrong labels are being rendered.

Environment

• Chart.js version: 2.9.3
• Browser name and version: Safari & Chrome
• Link to your project:

[kurkle]

Its the title callback that fails:

Chart.js/src/core/core.tooltip.js

Lines 43 to 60 in 679ec4a

	title: function(tooltipItems, data) {
	var title = '';
	var labels = data.labels;
	var labelCount = labels ? labels.length : 0;
	if (tooltipItems.length > 0) {
	var item = tooltipItems[0];
	if (item.label) {
	title = item.label;
	} else if (item.xLabel) {
	title = item.xLabel;
	} else if (labelCount > 0 && item.index < labelCount) {
	title = labels[item.index];
	}
	}
	return title;
	},

You can override that. This is most likely fixed in v3, too lazy to create a test from scratch.

[PaulWieland]

Work around:

tooltips: {
	callbacks: {
		title: function(tooltipItem, data) {
			let dataSet = tooltipItem[0].datasetIndex;
			let index = tooltipItem[0].index;
			let title = data.datasets[dataSet].data[index].x;
			return title;
		}
	}
}