Fix hidden charts hanging the browser

Ensure width cannot be greater than maxWidth. Similar to `minSize.height` calculation.

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index f8df92497e90d410e9996e9d3e75abca3f5b36f9..596ccb0ea3bb2d0a00b0efe6e8ab5c878467c41c 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -356,7 +356,7 @@ module.exports = function(Chart) {
                                        } else {
                                                largestTextWidth += me.options.ticks.padding;
                                        }
-                                       minSize.width += largestTextWidth;
+                                       minSize.width = Math.min(me.maxWidth, minSize.width + largestTextWidth);
                                        me.paddingTop = tickFont.size / 2;
                                        me.paddingBottom = tickFont.size / 2;
                                }

diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js
index 567454d29511ccddeb61de08d701d69e22db7472..710d51410f85d0960721ba07e94be45469d1d575 100755 (executable)
--- a/src/scales/scale.time.js
+++ b/src/scales/scale.time.js
@@ -145,18 +145,19 @@ module.exports = function(Chart) {
                var unitSizeInMilliSeconds = unitDefinition.size;
                var sizeInUnits = Math.ceil((max - min) / unitSizeInMilliSeconds);
                var multiplier = 1;
+               var range = max - min;
 
                if (unitDefinition.steps) {
                        // Have an array of steps
                        var numSteps = unitDefinition.steps.length;
                        for (var i = 0; i < numSteps && sizeInUnits > maxTicks; i++) {
                                multiplier = unitDefinition.steps[i];
-                               sizeInUnits = Math.ceil((max - min) / (unitSizeInMilliSeconds * multiplier));
+                               sizeInUnits = Math.ceil(range / (unitSizeInMilliSeconds * multiplier));
                        }
                } else {
-                       while (sizeInUnits > maxTicks) {
+                       while (sizeInUnits > maxTicks && maxTicks > 0) {
                                ++multiplier;
-                               sizeInUnits = Math.ceil((max - min) / (unitSizeInMilliSeconds * multiplier));
+                               sizeInUnits = Math.ceil(range / (unitSizeInMilliSeconds * multiplier));
                        }
                }
 

diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js
index 076acfbf01ac233b5514dadba8a1179adf06d02a..b1ab8410c4bce3a409ecebc09352d776bac71efc 100755 (executable)
--- a/test/specs/scale.time.tests.js
+++ b/test/specs/scale.time.tests.js
@@ -471,4 +471,34 @@ describe('Time scale tests', function() {
                        unit: 'day',
                });
        });
+
+       it('does not create a negative width chart when hidden', function() {
+               var chart = window.acquireChart({
+                       type: 'line',
+                       data: {
+                               datasets: [{
+                                       data: []
+                               }]
+                       },
+                       options: {
+                               scales: {
+                                       xAxes: [{
+                                               type: 'time',
+                                               time: {
+                                                       min: moment().subtract(1, 'months'),
+                                                       max: moment(),
+                                               }
+                                       }],
+                               },
+                               responsive: true,
+                       },
+               }, {
+                       wrapper: {
+                               style: 'display: none',
+                       },
+               });
+               expect(chart.scales['y-axis-0'].width).toEqual(0);
+               expect(chart.scales['y-axis-0'].maxWidth).toEqual(0);
+               expect(chart.width).toEqual(0);
+       });
 });