diff --git a/src/core/core.scale.js b/src/core/core.scale.js index c267cb4adbf..f08c68fe918 100644 --- a/src/core/core.scale.js +++ b/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)'; } diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js index 2981c35c9b4..573c132ae07 100644 --- a/test/specs/core.scale.tests.js +++ b/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); + }); + }); });