diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js index c91bf6e701c..96737e4ff17 100644 --- a/src/core/core.layouts.js +++ b/src/core/core.layouts.js @@ -99,7 +99,8 @@ function updateDims(chartArea, params, layout) { chartArea.h = newHeight; // return true if chart area changed in layout's direction - return layout.horizontal ? newWidth !== chartArea.w : newHeight !== chartArea.h; + var sizes = layout.horizontal ? [newWidth, chartArea.w] : [newHeight, chartArea.h]; + return sizes[0] !== sizes[1] && (!isNaN(sizes[0]) || !isNaN(sizes[1])); } } diff --git a/test/specs/core.layouts.tests.js b/test/specs/core.layouts.tests.js index 21a31c8975c..c191f203341 100644 --- a/test/specs/core.layouts.tests.js +++ b/test/specs/core.layouts.tests.js @@ -653,5 +653,45 @@ describe('Chart.layouts', function() { expect(yAxis.width).toBeCloseToPixel(33); expect(yAxis.ticks).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5', '0']); }); + + it('should correctly handle NaN dimensions', function() { + + // issue #7761: Maximum call stack size exceeded + var chartContainer = document.createElement('div'); + chartContainer.style.width = '600px'; + chartContainer.style.height = '400px'; + + var chartCanvas = document.createElement('canvas'); + chartContainer.appendChild(chartCanvas); + + var chart = new Chart(chartCanvas, { + type: 'line', + responsive: true, + data: { + labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], + datasets: [{ + label: '# of Votes', + data: [12, 19, 3, 5, 2, 3] + }] + }, + options: { + scales: { + yAxes: [{ + type: 'linear', + label: 'first axis', + position: 'right' + }, { + type: 'linear', + label: 'second axis', + position: 'right' + }] + } + } + }); + + expect(chart.width).toBeNaN(); + expect(chart.height).toBeNaN(); + + }); }); });