Ability to toggle individual bar visibility (#7870)

diff --git a/docs/docs/developers/api.md b/docs/docs/developers/api.md
index 175c52371b38408a8d26a1dbc0bfce6756eccb3e..2331e11e2feebb62d7d630e082fde55ec35087ce 100644 (file)
--- a/docs/docs/developers/api.md
+++ b/docs/docs/developers/api.md
@@ -174,7 +174,7 @@ chart.update(); // chart now renders with dataset hidden
 
 ## toggleDataVisibility(index)
 
-Toggles the visibility of an item in all datasets. A dataset needs to explicitly support this feature for it to have an effect. From internal chart types, doughnut / pie and polar area use this.
+Toggles the visibility of an item in all datasets. A dataset needs to explicitly support this feature for it to have an effect. From internal chart types, doughnut / pie, polar area, and bar use this.
 
 ```javascript
 chart.toggleDataVisibility(2); // toggles the item in all datasets, at index 2

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index dea91c865e62e127856105305d2ca7bea4906185..562de63509ca1d55e96ec13e507a4add7e875730 100644 (file)
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -416,7 +416,13 @@ export default class BarController extends DatasetController {
                        vScale._startPixel - 10,
                        vScale._endPixel + 10);
 
-               head = vScale.getPixelForValue(start + length);
+               if (this.chart.getDataVisibility(index)) {
+                       head = vScale.getPixelForValue(start + length);
+               } else {
+                       // When not visible, no height
+                       head = base;
+               }
+
                size = head - base;
 
                if (minBarLength !== undefined && Math.abs(size) < minBarLength) {

diff --git a/test/specs/controller.bar.tests.js b/test/specs/controller.bar.tests.js
index f287071ac9b18c073495da9985cd81aeb4927a01..e898badbe70a5cbbebb7b15404095416bed67ed5 100644 (file)
--- a/test/specs/controller.bar.tests.js
+++ b/test/specs/controller.bar.tests.js
@@ -1532,6 +1532,43 @@ describe('Chart.controllers.bar', function() {
                expect(data[1].base - minBarLength).toEqual(data[1].x);
        });
 
+       it('should respect the data visibility settings', function() {
+               var chart = window.acquireChart({
+                       type: 'bar',
+                       data: {
+                               datasets: [{
+                                       data: [1, 2, 3, 4]
+                               }],
+                               labels: ['A', 'B', 'C', 'D']
+                       },
+                       options: {
+                               legend: false,
+                               title: false,
+                               scales: {
+                                       x: {
+                                               type: 'category',
+                                               display: false
+                                       },
+                                       y: {
+                                               type: 'linear',
+                                               display: false,
+                                       }
+                               }
+                       }
+               });
+
+               var data = chart.getDatasetMeta(0).data;
+               expect(data[0].base).toBeCloseToPixel(512);
+               expect(data[0].y).toBeCloseToPixel(384);
+
+               chart.toggleDataVisibility(0);
+               chart.update();
+
+               data = chart.getDatasetMeta(0).data;
+               expect(data[0].base).toBeCloseToPixel(512);
+               expect(data[0].y).toBeCloseToPixel(512);
+       });
+
        describe('Float bar', function() {
                it('Should return correct values from getMinMax', function() {
                        var chart = window.acquireChart({