Introduce the 'minBarLength' bar option (#5741)

diff --git a/docs/charts/bar.md b/docs/charts/bar.md
index e4d146b2c67ceade8833e1d6cb7a05b185deaaf6..eaaad0b58ce36752156600a9f58d052aaeb3fb70 100644 (file)
--- a/docs/charts/bar.md
+++ b/docs/charts/bar.md
@@ -97,6 +97,7 @@ The bar chart defines the following configuration options. These options are mer
 | `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
 | `barThickness` | `Number/String` | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness)
 | `maxBarThickness` | `Number` | | Set this to ensure that bars are not sized thicker than this.
+| `minBarLength` | `Number` | | Set this to ensure that bars have a minimum length in pixels.
 | `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
 
 ### barThickness

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index cadae3fdb6c6799766f06735520df14fb193938e..74e6d2289f09d47d376ec5ed11a4c2074da9c4df 100644 (file)
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -382,8 +382,10 @@ module.exports = function(Chart) {
                        var chart = me.chart;
                        var meta = me.getMeta();
                        var scale = me.getValueScale();
+                       var isHorizontal = scale.isHorizontal();
                        var datasets = chart.data.datasets;
                        var value = scale.getRightValue(datasets[datasetIndex].data[index]);
+                       var minBarLength = scale.options.minBarLength;
                        var stacked = scale.options.stacked;
                        var stack = meta.stack;
                        var start = 0;
@@ -410,6 +412,15 @@ module.exports = function(Chart) {
                        head = scale.getPixelForValue(start + value);
                        size = (head - base) / 2;
 
+                       if (minBarLength !== undefined && Math.abs(size) < minBarLength) {
+                               size = minBarLength;
+                               if (value >= 0 && !isHorizontal || value < 0 && isHorizontal) {
+                                       head = base - minBarLength;
+                               } else {
+                                       head = base + minBarLength;
+                               }
+                       }
+
                        return {
                                size: size,
                                base: base,

diff --git a/test/specs/scale.linear.tests.js b/test/specs/scale.linear.tests.js
index 380feaac09d4532d42843889e99e50e8eedf4d8a..959a76db01ea796455af7328ed9e85a344e1376f 100644 (file)
--- a/test/specs/scale.linear.tests.js
+++ b/test/specs/scale.linear.tests.js
@@ -1046,4 +1046,52 @@ describe('Linear Scale', function() {
 
                expect(chart.scales['x-axis-0'].max).toEqual(0);
        });
+
+       it('minBarLength settings should be used on Y axis on bar chart', function() {
+               var minBarLength = 4;
+               var chart = window.acquireChart({
+                       type: 'bar',
+                       data: {
+                               datasets: [{
+                                       data: [0.05, -0.05, 10, 15, 20, 25, 30, 35]
+                               }]
+                       },
+                       options: {
+                               scales: {
+                                       yAxes: [{
+                                               minBarLength: minBarLength
+                                       }]
+                               }
+                       }
+               });
+
+               var data = chart.getDatasetMeta(0).data;
+
+               expect(data[0]._model.base - minBarLength).toEqual(data[0]._model.y);
+               expect(data[1]._model.base + minBarLength).toEqual(data[1]._model.y);
+       });
+
+       it('minBarLength settings should be used on X axis on horizontalBar chart', function() {
+               var minBarLength = 4;
+               var chart = window.acquireChart({
+                       type: 'horizontalBar',
+                       data: {
+                               datasets: [{
+                                       data: [0.05, -0.05, 10, 15, 20, 25, 30, 35]
+                               }]
+                       },
+                       options: {
+                               scales: {
+                                       xAxes: [{
+                                               minBarLength: minBarLength
+                                       }]
+                               }
+                       }
+               });
+
+               var data = chart.getDatasetMeta(0).data;
+
+               expect(data[0]._model.base + minBarLength).toEqual(data[0]._model.x);
+               expect(data[1]._model.base - minBarLength).toEqual(data[1]._model.x);
+       });
 });