Bar spacing is now dynamic at small sizes.

Closes #1468

diff --git a/samples/bar.html b/samples/bar.html
index 7f1d8e7eabfe73959dd60cb968d0282dd8f2701d..526fd8e5a2d076d4737a7d0f0a6c5198cc05d63e 100644 (file)
--- a/samples/bar.html
+++ b/samples/bar.html
@@ -25,121 +25,120 @@
     <div>
         <h3>Legend</h3>
         <div id="legendContainer">
-            
         </div>
     </div>
     <script>
-    var randomScalingFactor = function() {
-        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
-    };
-    var randomColorFactor = function() {
-        return Math.round(Math.random() * 255);
-    };
-    var randomColor = function() {
-        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
-    };
-
-    var barChartData = {
-        labels: ["January", "February", "March", "April", "May", "June", "July"],
-        datasets: [{
-            label: 'Dataset 1',
-            backgroundColor: "rgba(220,220,220,0.5)",
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
-        }, {
-            label: 'Dataset 2',
-            backgroundColor: "rgba(151,187,205,0.5)",
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
-        }, {
-            label: 'Dataset 3',
-            backgroundColor: "rgba(151,187,205,0.5)",
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
-        }]
-
-    };
-
-    function updateLegend() {
-        $legendContainer = $('#legendContainer');
-        $legendContainer.empty();
-        $legendContainer.append(window.myBar.generateLegend());
-    }
-
-    window.onload = function() {
-        var ctx = document.getElementById("canvas").getContext("2d");
-        window.myBar = new Chart(ctx, {
-            type: 'bar',
-            data: barChartData,
-            options: {
-                responsive: true,
-                scales: {
-                    xAxes: [{
-                        // So that bars fill the entire width of the grid
-                        categorySpacing: 0,
-                        spacing: 0
-                    }]
-                }
-            }
-        });
+        var randomScalingFactor = function() {
+            return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+        };
+        var randomColorFactor = function() {
+            return Math.round(Math.random() * 255);
+        };
+        var randomColor = function() {
+            return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+        };
 
-        updateLegend();
-    };
+        var barChartData = {
+            labels: ["January", "February", "March", "April", "May", "June", "July"],
+            datasets: [{
+                label: 'Dataset 1',
+                backgroundColor: "rgba(220,220,220,0.5)",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            }, {
+                label: 'Dataset 2',
+                backgroundColor: "rgba(151,187,205,0.5)",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            }, {
+                label: 'Dataset 3',
+                backgroundColor: "rgba(151,187,205,0.5)",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            }]
+
+        };
 
-    $('#randomizeData').click(function() {
-        var zero = Math.random() < 0.2 ? true : false;
-        $.each(barChartData.datasets, function(i, dataset) {
-            dataset.backgroundColor = randomColor();
-            dataset.data = dataset.data.map(function() {
-                return zero ? 0.0 : randomScalingFactor();
+        function updateLegend() {
+            $legendContainer = $('#legendContainer');
+            $legendContainer.empty();
+            $legendContainer.append(window.myBar.generateLegend());
+        }
+
+        window.onload = function() {
+            var ctx = document.getElementById("canvas").getContext("2d");
+            window.myBar = new Chart(ctx, {
+                type: 'bar',
+                data: barChartData,
+                options: {
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                            // So that bars fill the entire width of the grid
+                            categorySpacing: 10,
+                            spacing: 0
+                        }]
+                    }
+                }
             });
 
-        });
-        window.myBar.update();
-        updateLegend();
-    });
-
-    $('#addDataset').click(function() {
-        var newDataset = {
-            label: 'Dataset ' + barChartData.datasets.length,
-            backgroundColor: randomColor(),
-            data: []
+            updateLegend();
         };
 
-        for (var index = 0; index < barChartData.labels.length; ++index) {
-            newDataset.data.push(randomScalingFactor());
-        }
+        $('#randomizeData').click(function() {
+            var zero = Math.random() < 0.2 ? true : false;
+            $.each(barChartData.datasets, function(i, dataset) {
+                dataset.backgroundColor = randomColor();
+                dataset.data = dataset.data.map(function() {
+                    return zero ? 0.0 : randomScalingFactor();
+                });
 
-        window.myBar.addDataset(newDataset, 1);
-        updateLegend();
-    });
+            });
+            window.myBar.update();
+            updateLegend();
+        });
 
-    $('#addData').click(function() {
-        if (barChartData.datasets.length > 0) {
-            barChartData.labels.push('data #' + barChartData.labels.length);
+        $('#addDataset').click(function() {
+            var newDataset = {
+                label: 'Dataset ' + barChartData.datasets.length,
+                backgroundColor: randomColor(),
+                data: []
+            };
 
-            for (var index = 0; index < barChartData.datasets.length; ++index) {
-                window.myBar.addData(randomScalingFactor(), index);
+            for (var index = 0; index < barChartData.labels.length; ++index) {
+                newDataset.data.push(randomScalingFactor());
             }
 
+            window.myBar.addDataset(newDataset, 1);
             updateLegend();
-        }
-    });
+        });
 
-    $('#removeDataset').click(function() {
-        window.myBar.removeDataset(0);
-        updateLegend();
-    });
+        $('#addData').click(function() {
+            if (barChartData.datasets.length > 0) {
+                barChartData.labels.push('data #' + barChartData.labels.length);
 
-    $('#removeData').click(function() {
-        barChartData.labels.splice(-1, 1); // remove the label first
+                for (var index = 0; index < barChartData.datasets.length; ++index) {
+                    window.myBar.addData(randomScalingFactor(), index);
+                }
 
-        barChartData.datasets.forEach(function(dataset, datasetIndex) {
-            window.myBar.removeData(datasetIndex, -1);
+                updateLegend();
+            }
         });
-        updateLegend();
-    });
 
-    $('#show').click(function() {
-        document.getElementById('container').style.display = '';
-    });
+        $('#removeDataset').click(function() {
+            window.myBar.removeDataset(0);
+            updateLegend();
+        });
+
+        $('#removeData').click(function() {
+            barChartData.labels.splice(-1, 1); // remove the label first
+
+            barChartData.datasets.forEach(function(dataset, datasetIndex) {
+                window.myBar.removeData(datasetIndex, -1);
+            });
+            updateLegend();
+        });
+
+        $('#show').click(function() {
+            document.getElementById('container').style.display = '';
+        });
     </script>
 </body>
 

diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js
index 38a69c92e9e8829eee20b873283b3246f52b0860..1650d523c2bfc8f48abe7708295b029d5c68a232 100644 (file)
--- a/src/scales/scale.category.js
+++ b/src/scales/scale.category.js
@@ -73,11 +73,18 @@
 
         // Functions needed for bar charts
         calculateBaseWidth: function() {
-            return (this.getPixelForValue(null, 1, 0, true) - this.getPixelForValue(null, 0, 0, true)) - (2 * this.options.categorySpacing);
+            var base = this.getPixelForValue(null, 1, 0, true) - this.getPixelForValue(null, 0, 0, true);
+            var spacing = 2 * this.options.categorySpacing;
+            if (base < spacing * 2) {
+                var mod = Math.min((spacing * 2) / base, 1.5);
+                base = (base / 2) * mod;
+                return base;
+            }
+            return base - spacing;
         },
         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() - ((barDatasetCount - 1) * this.options.spacing);
+            var baseWidth = Math.max(this.calculateBaseWidth() - (this.options.stacked ? 0 : (barDatasetCount - 1) * this.options.spacing), 1);
 
             if (this.options.stacked) {
                 return baseWidth;