[BUG] Category Scale misplaced

[martinzuern]

When creating a bubble chart, using a time and a category scale, the bubbles are placed wrong (one of them is even placed off the canvas)

Example: https://jsfiddle.net/martinzuern/skyd9kv2/8/

Expected Behavior

The bubbles should appear as specified in the data set.
E.g. when changing the axis to linear scale, the bubbles are displayed correctly:

Current Behavior

The bubbles are displayed in the wrong position and also off-canvas:

Possible Solution

Steps to Reproduce (for bugs)

var ctx = $('#chart-errors');
var bubbleChartData = {
  yLabels: [400, 404, 503],
  datasets: [{
    label: 'Errors',
    backgroundColor: 'red',
    borderColor: 'red',
    borderWidth: 1,
    data: [{
		"x": "2017-03-06T15:00:00.000Z",
		"y": 400,
		"quantity": 1,
		"r": 5
	}, {
		"x": "2017-03-14T03:00:00.000Z",
		"y": 503,
		"quantity": 1,
		"r": 5
	}, {
		"x": "2017-03-20T15:00:00.000Z",
		"y": 400,
		"quantity": 4,
		"r": 5
	}, {
		"x": "2017-03-20T15:00:00.000Z",
		"y": 404,
		"quantity": 1,
		"r": 5
	}]
  }]
};
var chart = new Chart(ctx, {
  type: 'bubble',
  data: bubbleChartData,
  options: {
    scales: {
      yAxes: [{
        type: 'category',
        position: 'left'
      }],
      xAxes: [{
        type: 'time',
      }]
    }
  }
});

Context

The chart displays clearly wrong results

Environment

• Chart.js version: 2.4.0
• Browser name and version: Chrome 56.0.2924.87

[etimberg]

I feel like this is related to the fact that the category axis gets labels from the data.labels property.

[martinzuern]

Also reproducible with version 2.5.0 (https://jsfiddle.net/martinzuern/4kb980qz/1/)

[martinzuern]

Seems like getPixelForValue(value, index, datasetIndex, includeOffset) in src/scales/scale.category.js returns a wrong value here: When a string/integer (for the scale ticks) as value parameter is used, then the function returns the correct values. But when a Object is used, the returned values are incorrect.

[etimberg]

Resolved in #4062