diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js
index 1cb6fbb534f..fe3702cda4e 100644
--- 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 e72117f5a36..d8d08476f49 100644
--- 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,