From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Mon, 12 Oct 2020 14:22:55 +0000 (-0400)
Subject: Ability to toggle individual bar visibility (#7870)
X-Git-Tag: v3.0.0-beta.4~11
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3f89c25895b5d0a41c9197d886901d5575bf6fd2;p=thirdparty%2FChart.js.git

Ability to toggle individual bar visibility (#7870)
---

diff --git a/docs/docs/developers/api.md b/docs/docs/developers/api.md
index 175c52371..2331e11e2 100644
--- 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 dea91c865..562de6350 100644
--- 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 f287071ac..e898badbe 100644
--- 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({