Count the number of bars when determining the bar width

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index c68d478c5e13f4e6b90a501f74ef902b781b8899..94decab0499202168ffa2a9f1e1680c086dceaa2 100644 (file)
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -61,6 +61,21 @@
                        return this.chart.scales[scaleID];
                },
 
+               // Get the number of datasets that display bars. We use this to correctly calculate the bar width
+               getBarCount: function getBarCount() {
+                       var barCount = 0;
+
+                       helpers.each(this.chart.data.datasets, function(dataset) {
+                               if (dataset.type === 'bar') {
+                                       ++barCount;
+                               } else if (dataset.type === undefined && this.chart.config.type === 'bar') {
+                                       ++barCount;
+                               }
+                       }, this);
+
+                       return barCount;
+               },
+
                addElements: function() {
                        this.getDataset().metaData = this.getDataset().metaData || [];
                        helpers.each(this.getDataset().data, function(value, index) {
@@ -78,7 +93,10 @@
                                _datasetIndex: this.index,
                                _index: index,
                        });
-                       this.updateElement(rectangle, index, true);
+
+                       var numBars = this.getBarCount();
+
+                       this.updateElement(rectangle, index, true, numBars);
                        this.getDataset().metaData.splice(index, 0, rectangle);
                },
                removeElement: function(index) {
@@ -90,12 +108,14 @@
                },
 
                update: function(reset) {
+                       var numBars = this.getBarCount();
+
                        helpers.each(this.getDataset().metaData, function(rectangle, index) {
-                               this.updateElement(rectangle, index, reset);
+                               this.updateElement(rectangle, index, reset, numBars);
                        }, this);
                },
 
-               updateElement: function updateElement(rectangle, index, reset) {
+               updateElement: function updateElement(rectangle, index, reset, numBars) {
                        var xScale = this.getScaleForId(this.getDataset().xAxisID);
                        var yScale = this.getScaleForId(this.getDataset().yAxisID);
                        var yScalePoint;
@@ -120,7 +140,7 @@
 
                                // Desired view properties
                                _model: {
-                                       x: xScale.calculateBarX(this.chart.data.datasets.length, this.index, index),
+                                       x: xScale.calculateBarX(numBars, this.index, index),
                                        y: reset ? yScalePoint : yScale.calculateBarY(this.index, index),
 
                                        // Tooltip
@@ -129,7 +149,7 @@
 
                                        // Appearance
                                        base: yScale.calculateBarBase(this.index, index),
-                                       width: xScale.calculateBarWidth(this.chart.data.datasets.length),
+                                       width: xScale.calculateBarWidth(numBars),
                                        backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
                                        borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
                                        borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth),

diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js
index ec355c77cd1aedd26bc56d1dc4f1ec06cacf3cb3..d97699c1f3dc2b7526e7ef78db5eb93e4bc155a2 100644 (file)
--- a/src/scales/scale.category.js
+++ b/src/scales/scale.category.js
@@ -75,19 +75,19 @@
         calculateBaseWidth: function() {
             return (this.getPixelForValue(null, 1, 0, true) - this.getPixelForValue(null, 0, 0, true)) - (2 * this.options.categorySpacing);
         },
-        calculateBarWidth: function(datasetCount) {
+        calculateBarWidth: function(barDatasetCount) {
             //The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
-            var baseWidth = this.calculateBaseWidth() - ((datasetCount - 1) * this.options.spacing);
+            var baseWidth = this.calculateBaseWidth() - ((barDatasetCount - 1) * this.options.spacing);
 
             if (this.options.stacked) {
                 return baseWidth;
             }
-            return (baseWidth / datasetCount);
+            return (baseWidth / barDatasetCount);
         },
-        calculateBarX: function(datasetCount, datasetIndex, elementIndex) {
+        calculateBarX: function(barDatasetCount, datasetIndex, elementIndex) {
             var xWidth = this.calculateBaseWidth(),
                 xAbsolute = this.getPixelForValue(null, elementIndex, datasetIndex, true) - (xWidth / 2),
-                barWidth = this.calculateBarWidth(datasetCount);
+                barWidth = this.calculateBarWidth(barDatasetCount);
 
             if (this.options.stacked) {
                 return xAbsolute + barWidth / 2;