Fix category scale tick placement with autoSkip (#7622)

src/scales/scale.category.js

@@ -5,7 +5,6 @@ export default class CategoryScale extends Scale {
 	constructor(cfg) {
 		super(cfg);
 
-		this._numLabels = 0;
 		/** @type {number} */
 		this._startValue = undefined;
 		this._valueRange = 0;
@@ -34,16 +33,19 @@ export default class CategoryScale extends Scale {
 		const min = me.min;
 		const max = me.max;
 		const offset = me.options.offset;
+		const ticks = [];
 		let labels = me.getLabels();
 
 		// If we are viewing some subset of labels, slice the original array
 		labels = (min === 0 && max === labels.length - 1) ? labels : labels.slice(min, max + 1);
 
-		me._numLabels = labels.length;
 		me._valueRange = Math.max(labels.length - (offset ? 0 : 1), 1);
 		me._startValue = me.min - (offset ? 0.5 : 0);
 
-		return labels.map((l) => ({value: l}));
+		for (let value = min; value <= max; value++) {
+			ticks.push({value});
+		}
+		return ticks;
 	}
 
 	getLabelForValue(value) {
@@ -89,7 +91,7 @@ export default class CategoryScale extends Scale {
 		if (index < 0 || index > ticks.length - 1) {
 			return null;
 		}
-		return me.getPixelForValue(index * me._numLabels / ticks.length + me.min);
+		return me.getPixelForValue(ticks[index].value);
 	}
 
 	getValueForPixel(pixel) {
@@ -108,4 +110,8 @@ CategoryScale.id = 'category';
 /**
  * @type {any}
  */
-CategoryScale.defaults = {};
+CategoryScale.defaults = {
+	ticks: {
+		callback: CategoryScale.prototype.getLabelForValue
+	}
+};

test/specs/scale.category.tests.js

@@ -1,13 +1,7 @@
-// Test the category scale
-
 function getLabels(scale) {
 	return scale.ticks.map(t => t.label);
 }
 
-function getValues(scale) {
-	return scale.ticks.map(t => t.value);
-}
-
 describe('Category scale tests', function() {
 	describe('auto', jasmine.fixture.specs('scale.category'));
 
@@ -19,64 +13,58 @@ describe('Category scale tests', function() {
 
 	it('Should have the correct default config', function() {
 		var defaultConfig = Chart.defaults.scales.category;
-		expect(defaultConfig).toEqual({});
+		expect(defaultConfig).toEqual({
+			ticks: {
+				callback: Chart.registry.getScale('category').prototype.getLabelForValue
+			}
+		});
 	});
 
 
 	it('Should generate ticks from the data xLabels', function() {
-		var scaleID = 'myScale';
-
-		var mockData = {
-			datasets: [{
-				yAxisID: scaleID,
-				data: [10, 5, 0, 25, 78]
-			}],
-			xLabels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
-		};
-
-		var config = Chart.helpers.clone(Chart.defaults.scales.category);
-		config.position = 'bottom';
-		var Constructor = Chart.registry.getScale('category');
-		var scale = new Constructor({
-			ctx: {},
-			chart: {
-				data: mockData
+		var labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'];
+		var chart = window.acquireChart({
+			type: 'line',
+			data: {
+				xLabels: labels,
+				datasets: [{
+					data: [10, 5, 0, 25, 78]
+				}]
 			},
-			id: scaleID
+			options: {
+				scales: {
+					x: {
+						type: 'category',
+					}
+				}
+			}
 		});
 
-		scale.init(config);
-		scale.determineDataLimits();
-		scale.ticks = scale.buildTicks();
-		expect(getValues(scale)).toEqual(mockData.xLabels);
+		var scale = chart.scales.x;
+		expect(getLabels(scale)).toEqual(labels);
 	});
 
 	it('Should generate ticks from the data yLabels', function() {
-		var scaleID = 'myScale';
-
-		var mockData = {
-			datasets: [{
-				yAxisID: scaleID,
-				data: [10, 5, 0, 25, 78]
-			}],
-			yLabels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
-		};
-
-		var config = Chart.helpers.clone(Chart.defaults.scales.category);
-		config.position = 'left'; // y axis
-		var Constructor = Chart.registry.getScale('category');
-		var scale = new Constructor({
-			ctx: {},
-			chart: {
-				data: mockData
+		var labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'];
+		var chart = window.acquireChart({
+			type: 'line',
+			data: {
+				yLabels: labels,
+				datasets: [{
+					data: [10, 5, 0, 25, 78]
+				}]
 			},
-			id: scaleID
+			options: {
+				scales: {
+					y: {
+						type: 'category'
+					}
+				}
+			}
 		});
 
-		scale.init(config);
-		scale.determineDataLimits();
-		scale.ticks = scale.buildTicks();
-		expect(getValues(scale)).toEqual(mockData.yLabels);
+		var scale = chart.scales.y;
+		expect(getLabels(scale)).toEqual(labels);
 	});
 
 	it('Should generate ticks from the axis labels', function() {
@@ -84,7 +72,9 @@ describe('Category scale tests', function() {
 		var chart = window.acquireChart({
 			type: 'line',
 			data: {
-				data: [10, 5, 0, 25, 78]
+				datasets: [{
+					data: [10, 5, 0, 25, 78]
+				}]
 			},
 			options: {
 				scales: {