add check on overwriting canvas height/width (#4874)

* add check on overwriting canvas height/width

* unit test for this

diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index 713362cd8d10cb4cbab9794b0462b823ee37f35b..bdce895cf707b90dd5545b678d441f1b0958796b 100644 (file)
--- a/src/core/core.helpers.js
+++ b/src/core/core.helpers.js
@@ -512,8 +512,10 @@ module.exports = function(Chart) {
                // If no style has been set on the canvas, the render size is used as display size,
                // making the chart visually bigger, so let's enforce it to the "correct" values.
                // See https://github.com/chartjs/Chart.js/issues/3575
-               canvas.style.height = height + 'px';
-               canvas.style.width = width + 'px';
+               if (!canvas.style.height && !canvas.style.width) {
+                       canvas.style.height = height + 'px';
+                       canvas.style.width = width + 'px';
+               }
        };
        // -- Canvas methods
        helpers.fontString = function(pixelSize, fontStyle, fontFamily) {

diff --git a/test/specs/core.helpers.tests.js b/test/specs/core.helpers.tests.js
index 419428bf1d624cea457f860c536402f2bd8e7303..44446d38ab85649c9a9dd023faa117f4371cee1c 100644 (file)
--- a/test/specs/core.helpers.tests.js
+++ b/test/specs/core.helpers.tests.js
@@ -725,6 +725,23 @@ describe('Core helper tests', function() {
                document.body.removeChild(div);
        });
 
+       it ('should leave styled height and width on canvas if explicitly set', function() {
+               var chart = window.acquireChart({}, {
+                       canvas: {
+                               height: 200,
+                               width: 200,
+                               style: 'height: 400px; width: 400px;'
+                       }
+               });
+
+               helpers.retinaScale(chart, true);
+
+               var canvas = chart.canvas;
+
+               expect(canvas.style.height).toBe('400px');
+               expect(canvas.style.width).toBe('400px');
+       });
+
        describe('Color helper', function() {
                function isColorInstance(obj) {
                        return typeof obj === 'object' && obj.hasOwnProperty('values') && obj.values.hasOwnProperty('rgb');