Provide a rectangle getArea implementation for horizontal bars (#6027)

diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js
index 1cb6fbb534fcc82d5095ce4e790018d1b327dd7c..fe3702cda4efaa119a582dfc574fa05bd7fe8579 100644 (file)
--- a/src/elements/element.rectangle.js
+++ b/src/elements/element.rectangle.js
@@ -206,7 +206,10 @@ module.exports = Element.extend({
 
        getArea: function() {
                var vm = this._view;
-               return vm.width * Math.abs(vm.y - vm.base);
+
+               return isVertical(this)
+                       ? vm.width * Math.abs(vm.y - vm.base)
+                       : vm.height * Math.abs(vm.x - vm.base);
        },
 
        tooltipPosition: function() {

diff --git a/test/specs/element.rectangle.tests.js b/test/specs/element.rectangle.tests.js
index e72117f5a36584b24c02f0311f297c34f023e2b5..d8d08476f493660ecb2131b466053d6021196ca4 100644 (file)
--- a/test/specs/element.rectangle.tests.js
+++ b/test/specs/element.rectangle.tests.js
@@ -132,7 +132,7 @@ describe('Rectangle element tests', function() {
                });
        });
 
-       it ('should get the correct area', function() {
+       it ('should get the correct vertical area', function() {
                var rectangle = new Chart.elements.Rectangle({
                        _datasetIndex: 2,
                        _index: 1
@@ -149,6 +149,23 @@ describe('Rectangle element tests', function() {
                expect(rectangle.getArea()).toEqual(60);
        });
 
+       it ('should get the correct horizontal area', function() {
+               var rectangle = new Chart.elements.Rectangle({
+                       _datasetIndex: 2,
+                       _index: 1
+               });
+
+               // Attach a view object as if we were the controller
+               rectangle._view = {
+                       base: 0,
+                       height: 4,
+                       x: 10,
+                       y: 15
+               };
+
+               expect(rectangle.getArea()).toEqual(40);
+       });
+
        it ('should get the center', function() {
                var rectangle = new Chart.elements.Rectangle({
                        _datasetIndex: 2,