Fix offsetGridLine behavior with a single data point (chartjs#5609)

src/core/core.scale.js

@@ -76,11 +76,15 @@ function labelsFromTicks(ticks) {
 	return labels;
 }
 
-function getLineValue(scale, index, offsetGridLines) {
+function getPixelForGridLine(scale, index, offsetGridLines) {
 	var lineValue = scale.getPixelForTick(index);
 
 	if (offsetGridLines) {
-		if (index === 0) {
+		if (scale.getTicks().length === 1) {
+			lineValue -= scale.isHorizontal() ?
+				Math.max(lineValue - scale.left, scale.right - lineValue) :
+				Math.max(lineValue - scale.top, scale.bottom - lineValue);
+		} else if (index === 0) {
 			lineValue -= (scale.getPixelForTick(1) - lineValue) / 2;
 		} else {
 			lineValue -= (lineValue - scale.getPixelForTick(index - 1)) / 2;
@@ -754,7 +758,7 @@ module.exports = Element.extend({
 					labelY = me.bottom - labelYOffset;
 				}
 
-				var xLineValue = getLineValue(me, index, gridLines.offsetGridLines && ticks.length > 1);
+				var xLineValue = getPixelForGridLine(me, index, gridLines.offsetGridLines);
 				if (xLineValue < me.left - epsilon) {
 					lineColor = 'rgba(0,0,0,0)';
 				}
@@ -781,7 +785,7 @@ module.exports = Element.extend({
 
 				labelX = isLeft ? me.right - labelXOffset : me.left + labelXOffset;
 
-				var yLineValue = getLineValue(me, index, gridLines.offsetGridLines && ticks.length > 1);
+				var yLineValue = getPixelForGridLine(me, index, gridLines.offsetGridLines);
 				if (yLineValue < me.top - epsilon) {
 					lineColor = 'rgba(0,0,0,0)';
 				}

test/specs/core.scale.tests.js

@@ -19,4 +19,137 @@ describe('Core.scale', function() {
 			}
 		});
 	});
+
+	var gridLineTests = [{
+		labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
+		offsetGridLines: false,
+		offset: false,
+		expected: [0.5, 128.5, 256.5, 384.5, 512.5]
+	}, {
+		labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
+		offsetGridLines: false,
+		offset: true,
+		expected: [51.5, 154.5, 256.5, 358.5, 461.5]
+	}, {
+		labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
+		offsetGridLines: true,
+		offset: false,
+		expected: [-63.5, 64.5, 192.5, 320.5, 448.5]
+	}, {
+		labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'],
+		offsetGridLines: true,
+		offset: true,
+		expected: [0, 103, 205.5, 307.5, 410]
+	}, {
+		labels: ['tick1'],
+		offsetGridLines: false,
+		offset: false,
+		expected: [0.5]
+	}, {
+		labels: ['tick1'],
+		offsetGridLines: false,
+		offset: true,
+		expected: [256.5]
+	}, {
+		labels: ['tick1'],
+		offsetGridLines: true,
+		offset: false,
+		expected: [-511.5]
+	}, {
+		labels: ['tick1'],
+		offsetGridLines: true,
+		offset: true,
+		expected: [0.5]
+	}];
+
+	gridLineTests.forEach(function(test) {
+		it('should get the correct pixels for ' + test.labels.length + ' gridLine(s) for the horizontal scale when offsetGridLines is ' + test.offsetGridLines + ' and offset is ' + test.offset, function() {
+			var chart = window.acquireChart({
+				type: 'line',
+				data: {
+					datasets: [{
+						data: []
+					}],
+					labels: test.labels
+				},
+				options: {
+					scales: {
+						xAxes: [{
+							id: 'xScale0',
+							gridLines: {
+								offsetGridLines: test.offsetGridLines,
+								drawTicks: false
+							},
+							ticks: {
+								display: false
+							},
+							offset: test.offset
+						}],
+						yAxes: [{
+							display: false
+						}]
+					},
+					legend: {
+						display: false
+					}
+				}
+			});
+
+			var xScale = chart.scales.xScale0;
+			xScale.ctx = window.createMockContext();
+			chart.draw();
+
+			expect(xScale.ctx.getCalls().filter(function(x) {
+				return x.name === 'moveTo' && x.args[1] === 0;
+			}).map(function(x) {
+				return x.args[0];
+			})).toEqual(test.expected);
+		});
+	});
+
+	gridLineTests.forEach(function(test) {
+		it('should get the correct pixels for ' + test.labels.length + ' gridLine(s) for the vertical scale when offsetGridLines is ' + test.offsetGridLines + ' and offset is ' + test.offset, function() {
+			var chart = window.acquireChart({
+				type: 'line',
+				data: {
+					datasets: [{
+						data: []
+					}],
+					labels: test.labels
+				},
+				options: {
+					scales: {
+						xAxes: [{
+							display: false
+						}],
+						yAxes: [{
+							type: 'category',
+							id: 'yScale0',
+							gridLines: {
+								offsetGridLines: test.offsetGridLines,
+								drawTicks: false
+							},
+							ticks: {
+								display: false
+							},
+							offset: test.offset
+						}]
+					},
+					legend: {
+						display: false
+					}
+				}
+			});
+
+			var yScale = chart.scales.yScale0;
+			yScale.ctx = window.createMockContext();
+			chart.draw();
+
+			expect(yScale.ctx.getCalls().filter(function(x) {
+				return x.name === 'moveTo' && x.args[0] === 0;
+			}).map(function(x) {
+				return x.args[1];
+			})).toEqual(test.expected);
+		});
+	});
 });