Ability to toggle individual bar visibility (#7870)

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

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) {

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({