Fix overlapping auto-generated ticks on time scale (#6115)

diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js
index 237769f5b17ae378f3920d8b16685ba85245ca06..2e9c14b8e226a3c7aa61aae1dbdb42e6469cd937 100644 (file)
--- a/src/scales/scale.time.js
+++ b/src/scales/scale.time.js
@@ -775,13 +775,20 @@ module.exports = Scale.extend({
                var me = this;
                var timeOpts = me.options.time;
                var displayFormats = timeOpts.displayFormats;
+               var margins = me.margins;
 
                // pick the longest format (milliseconds) for guestimation
                var format = displayFormats[timeOpts.unit] || displayFormats.millisecond;
 
                var exampleLabel = me.tickFormatFunction(exampleTime, 0, [], format);
                var tickLabelWidth = me.getLabelWidth(exampleLabel);
-               var innerWidth = me.isHorizontal() ? me.width : me.height;
+
+               // Using margins instead of padding because padding is not calculated
+               // at this point (buildTicks). Margins are provided from previous calculation
+               // in layout steps 5/6
+               var innerWidth = me.isHorizontal()
+                       ? me.width - (margins.left + margins.right)
+                       : me.height - (margins.top + margins.bottom);
                var capacity = Math.floor(innerWidth / tickLabelWidth);
 
                return capacity > 0 ? capacity : 1;

diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js
index 4a534385004a36247fbea680b94fe5fbac546d87..616f5c40a8060da84f3aa16e7a630d3d46a075b0 100755 (executable)
--- a/test/specs/scale.time.tests.js
+++ b/test/specs/scale.time.tests.js
@@ -668,8 +668,8 @@ describe('Time scale tests', function() {
 
                        expect(scale._ticks.map(function(tick) {
                                return tick.major;
-                       })).toEqual([true, false, false, false, false, false, true]);
-                       expect(scale.ticks).toEqual(['<8:00:00 pm>', '<8:00:10 pm>', '<8:00:20 pm>', '<8:00:30 pm>', '<8:00:40 pm>', '<8:00:50 pm>', '<8:01:00 pm>']);
+                       })).toEqual([true, false, false, false, true]);
+                       expect(scale.ticks).toEqual(['<8:00:00 pm>', '<8:00:15 pm>', '<8:00:30 pm>', '<8:00:45 pm>', '<8:01:00 pm>']);
                });
 
                it('should update ticks.callback correctly', function() {
@@ -680,7 +680,7 @@ describe('Time scale tests', function() {
                                return '{' + value + '}';
                        };
                        chart.update();
-                       expect(scale.ticks).toEqual(['{8:00:00 pm}', '{8:00:10 pm}', '{8:00:20 pm}', '{8:00:30 pm}', '{8:00:40 pm}', '{8:00:50 pm}', '{8:01:00 pm}']);
+                       expect(scale.ticks).toEqual(['{8:00:00 pm}', '{8:00:15 pm}', '{8:00:30 pm}', '{8:00:45 pm}', '{8:01:00 pm}']);
                });
        });
 
@@ -707,7 +707,7 @@ describe('Time scale tests', function() {
                                                                major: {
                                                                        enabled: true,
                                                                        callback: function(value) {
-                                                                               return '[' + value + ']';
+                                                                               return '[[' + value + ']]';
                                                                        }
                                                                },
                                                                minor: {
@@ -728,8 +728,8 @@ describe('Time scale tests', function() {
 
                        expect(scale._ticks.map(function(tick) {
                                return tick.major;
-                       })).toEqual([true, false, false, false, false, false, true]);
-                       expect(scale.ticks).toEqual(['[8:00 pm]', '(8:00:10 pm)', '(8:00:20 pm)', '(8:00:30 pm)', '(8:00:40 pm)', '(8:00:50 pm)', '[8:01 pm]']);
+                       })).toEqual([true, false, false, false, true]);
+                       expect(scale.ticks).toEqual(['[[8:00 pm]]', '(8:00:15 pm)', '(8:00:30 pm)', '(8:00:45 pm)', '[[8:01 pm]]']);
                });
 
                it('should only use ticks.minor callback if ticks.major.enabled is false', function() {
@@ -738,7 +738,7 @@ describe('Time scale tests', function() {
 
                        chart.options.scales.xAxes[0].ticks.major.enabled = false;
                        chart.update();
-                       expect(scale.ticks).toEqual(['(8:00:00 pm)', '(8:00:10 pm)', '(8:00:20 pm)', '(8:00:30 pm)', '(8:00:40 pm)', '(8:00:50 pm)', '(8:01:00 pm)']);
+                       expect(scale.ticks).toEqual(['(8:00:00 pm)', '(8:00:15 pm)', '(8:00:30 pm)', '(8:00:45 pm)', '(8:01:00 pm)']);
                });
 
                it('should use ticks.callback if ticks.major.callback is omitted', function() {
@@ -747,7 +747,7 @@ describe('Time scale tests', function() {
 
                        chart.options.scales.xAxes[0].ticks.major.callback = undefined;
                        chart.update();
-                       expect(scale.ticks).toEqual(['<8:00 pm>', '(8:00:10 pm)', '(8:00:20 pm)', '(8:00:30 pm)', '(8:00:40 pm)', '(8:00:50 pm)', '<8:01 pm>']);
+                       expect(scale.ticks).toEqual(['<8:00 pm>', '(8:00:15 pm)', '(8:00:30 pm)', '(8:00:45 pm)', '<8:01 pm>']);
                });
 
                it('should use ticks.callback if ticks.minor.callback is omitted', function() {
@@ -756,7 +756,7 @@ describe('Time scale tests', function() {
 
                        chart.options.scales.xAxes[0].ticks.minor.callback = undefined;
                        chart.update();
-                       expect(scale.ticks).toEqual(['[8:00 pm]', '<8:00:10 pm>', '<8:00:20 pm>', '<8:00:30 pm>', '<8:00:40 pm>', '<8:00:50 pm>', '[8:01 pm]']);
+                       expect(scale.ticks).toEqual(['[[8:00 pm]]', '<8:00:15 pm>', '<8:00:30 pm>', '<8:00:45 pm>', '[[8:01 pm]]']);
                });
        });