[BUG] Inaccurate (x) Point of Bar Chart's Data

[imballinst]

I use ChartJS 2.6 for a bar chart. I want to get the bar that I click by checking which data fulfills the expression startBarPoint <= clickedPoint <= endBarPoint. However, I can't get the bar I click because the _view.x property from all data are skewed to some extent (maybe around 15-25px).

Expected Behavior

Dataset points are shown accurately. For example, a bar has start point at [500, 300] and end point at [600, 300] (relative to its parent, layerX and layerY). Then, it means it has width of 100px. If I click on a pixel between [500,300] and [600.300] (inclusively), then it will return the context and active datasets via .onClick(context, dataset) passed via options. It should be easy to get what bar we clicked by searching data in the dataset that matches barStartXPoint <= clickedXPoint <= barEndXPoint.

Current Behavior

Currently, dataset points are sometimes (and somewhat) inaccurate. For example, if I hover on a bar, the whole dataset's color should darken, right? Because that dataset is active at that moment. However, each data in the dataset has invalid property (I think) _view.x value. On screen, it should be located from [500, 300] to [600, 300], but in the data's property, it is located from [500 + someVal, 300] to [600 + someVal, 300].

Possible Solution

The (x) point in the data property does not match with what we actually see. Maybe there is some miscalculation when the point is being projected, so there is some offset (somVal I have explained above).

Steps to Reproduce (for bugs)

http://jsfiddle.net/csdwuo8d/32/

1. Click on the leftmost side bar of Company A. If you click near the left border, it will return undefined in alert.
2. Check up your console. There should be lines like this. Ignore the iterate word, see the numbers on the right. The first number is index of the data, the second one is the start point (x), the third one is the clicked point (x), and the last one is the end point (x). Given that we clicked near the border and the dataset was active, shouldn't the start point (x) is before/same as the clicked point (x)?

iterate 1 420.9 404 476.61
iterate 2 482.79999999999995 404 538.51
iterate 3 544.7 404 600.4100000000001
iterate 4 606.6000000000001 404 662.3100000000002

3. Move your mouse bit by bit to the right, try clicking in the meantime until the alert doesn't show undefined, but [Object object]. The object means it returns the dataset[_dataIndex].
4. Check up your console. There should be a found word instead of all iterates.

Context

This issue affects me because I can't get the bar I click. I want to click on a bar, then get the _dataIndex of it, so I can render a new chart based on data[_index]. Currently, there are cases that I can't render the valid data because I can't get the correct _index.

Environment

• Chart.js version: 2.6.0
• OS: Ubuntu 16.04
• Browser name and version: Firefox 53.04 (64 bit) (tested on Chrome 57 as well)
• Link to your project: -

nb. sorry for bad Englando, even in my first language I couldn't explain this issue clearly

---

Findings (Edit 1)

I tried using element.inRange(mouseX, mouseY) and element.getCenterPoint(). The results are below.

Bounds left:  1226.9853333333335 mouseX:  1258 Bounds right:  1327.7613333333334  element.rectangle.js:165:4
Is in range:  true Center point:  Object { x: 1277.3733333333334, y: 404.5 }
0 2 Start:  1277.3733333333334 MouseX:  1258 End:  1378.1493333333335

For some reason, the _view.x and _view.y returns the bar's center position. Although so, I changed the method from checking which matches the startX <= mouseX <= endX to element.isInRange(mouseX, mouseY) but still no good. Sometimes, when I click on a bar, .inRange(mouseX, mouseY) will return false because mouseX has surpassed bounds.right from getBarBounds(bar)

[imballinst]

Found a workaround from my friend. Instead of checking the points, just pass this handler to options

{
  onClick: function(e) {
      const bar = this.getElementAtEvent(e)[0];
      alert(`Clicked bar: ${bar._model.label} ${bar._model.datasetLabel}`);
  }
}

[etimberg]

@imballinst I believe the issue here is that you are using layerX off the mouse event. According to MDN this is non-standard and shouldn't be used.

I would use a function like

Chart.js/src/core/core.helpers.js

Lines 408 to 444 in 4c763bf

	helpers.getRelativePosition = function(evt, chart) {
	var mouseX, mouseY;
	var e = evt.originalEvent || evt,
	canvas = evt.currentTarget || evt.srcElement,
	boundingRect = canvas.getBoundingClientRect();
	var touches = e.touches;
	if (touches && touches.length > 0) {
	mouseX = touches[0].clientX;
	mouseY = touches[0].clientY;
	} else {
	mouseX = e.clientX;
	mouseY = e.clientY;
	}
	// Scale mouse coordinates into canvas coordinates
	// by following the pattern laid out by 'jerryj' in the comments of
	// http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
	var paddingLeft = parseFloat(helpers.getStyle(canvas, 'padding-left'));
	var paddingTop = parseFloat(helpers.getStyle(canvas, 'padding-top'));
	var paddingRight = parseFloat(helpers.getStyle(canvas, 'padding-right'));
	var paddingBottom = parseFloat(helpers.getStyle(canvas, 'padding-bottom'));
	var width = boundingRect.right - boundingRect.left - paddingLeft - paddingRight;
	var height = boundingRect.bottom - boundingRect.top - paddingTop - paddingBottom;
	// We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
	// the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
	mouseX = Math.round((mouseX - boundingRect.left - paddingLeft) / (width) * canvas.width / chart.currentDevicePixelRatio);
	mouseY = Math.round((mouseY - boundingRect.top - paddingTop) / (height) * canvas.height / chart.currentDevicePixelRatio);
	return {
	x: mouseX,
	y: mouseY
	};
	};

to convert from a CSS pixel coordinate to an on-canvas coordinate.

[imballinst]

Alright, I could use that too in the future should I need the exact x and y value. Thanks!