Add support for hiding axis when all linked datasets are hidden (#5885)

When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.

docs/axes/README.md

@@ -16,7 +16,7 @@ The following properties are common to all axes provided by Chart.js.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `display` | `Boolean` | `true` | If set to `false` the axis is hidden from view. Overrides *gridLines.display*, *scaleLabel.display*, and *ticks.display*.
+| `display` | `Boolean`/`String` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
 | `callbacks` | `Object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks)
 | `weight` | `Number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
 

src/core/core.scale.js

@@ -396,7 +396,7 @@ module.exports = Element.extend({
 		var tickOpts = opts.ticks;
 		var scaleLabelOpts = opts.scaleLabel;
 		var gridLineOpts = opts.gridLines;
-		var display = opts.display;
+		var display = me._isVisible();
 		var position = opts.position;
 		var isHorizontal = me.isHorizontal();
 
@@ -678,12 +678,39 @@ module.exports = Element.extend({
 		return result;
 	},
 
+	/**
+	 * @private
+	 */
+	_isVisible: function() {
+		var me = this;
+		var chart = me.chart;
+		var display = me.options.display;
+		var i, ilen, meta;
+
+		if (display !== 'auto') {
+			return !!display;
+		}
+
+		// When 'auto', the scale is visible if at least one associated dataset is visible.
+		for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
+			if (chart.isDatasetVisible(i)) {
+				meta = chart.getDatasetMeta(i);
+				if (meta.xAxisID === me.id || meta.yAxisID === me.id) {
+					return true;
+				}
+			}
+		}
+
+		return false;
+	},
+
 	// Actually draw the scale on the canvas
 	// @param {rectangle} chartArea : the area of the chart to draw full grid lines on
 	draw: function(chartArea) {
 		var me = this;
 		var options = me.options;
-		if (!options.display) {
+
+		if (!me._isVisible()) {
 			return;
 		}
 

test/specs/core.scale.tests.js

@@ -206,4 +206,138 @@ describe('Core.scale', function() {
 			})).toEqual(test.expected);
 		});
 	});
+
+	describe('given the axes display option is set to auto', function() {
+		describe('for the x axes', function() {
+			it('should draw the axes if at least one associated dataset is visible', function() {
+				var chart = window.acquireChart({
+					type: 'line',
+					data: {
+						datasets: [{
+							data: [100, 200, 100, 50],
+							xAxisId: 'foo',
+							hidden: true,
+							labels: ['Q1', 'Q2', 'Q3', 'Q4']
+						}, {
+							data: [100, 200, 100, 50],
+							xAxisId: 'foo',
+							labels: ['Q1', 'Q2', 'Q3', 'Q4']
+						}]
+					},
+					options: {
+						scales: {
+							xAxes: [{
+								id: 'foo',
+								display: 'auto'
+							}],
+							yAxes: [{
+								type: 'category',
+								id: 'yScale0'
+							}]
+						}
+					}
+				});
+
+				var scale = chart.scales.foo;
+				scale.ctx = window.createMockContext();
+				chart.draw();
+
+				expect(scale.ctx.getCalls().length).toBeGreaterThan(0);
+				expect(scale.height).toBeGreaterThan(0);
+			});
+
+			it('should not draw the axes if no associated datasets are visible', function() {
+				var chart = window.acquireChart({
+					type: 'line',
+					data: {
+						datasets: [{
+							data: [100, 200, 100, 50],
+							xAxisId: 'foo',
+							hidden: true,
+							labels: ['Q1', 'Q2', 'Q3', 'Q4']
+						}]
+					},
+					options: {
+						scales: {
+							xAxes: [{
+								id: 'foo',
+								display: 'auto'
+							}]
+						}
+					}
+				});
+
+				var scale = chart.scales.foo;
+				scale.ctx = window.createMockContext();
+				chart.draw();
+
+				expect(scale.ctx.getCalls().length).toBe(0);
+				expect(scale.height).toBe(0);
+			});
+		});
+
+		describe('for the y axes', function() {
+			it('should draw the axes if at least one associated dataset is visible', function() {
+				var chart = window.acquireChart({
+					type: 'line',
+					data: {
+						datasets: [{
+							data: [100, 200, 100, 50],
+							yAxisId: 'foo',
+							hidden: true,
+							labels: ['Q1', 'Q2', 'Q3', 'Q4']
+						}, {
+							data: [100, 200, 100, 50],
+							yAxisId: 'foo',
+							labels: ['Q1', 'Q2', 'Q3', 'Q4']
+						}]
+					},
+					options: {
+						scales: {
+							yAxes: [{
+								id: 'foo',
+								display: 'auto'
+							}]
+						}
+					}
+				});
+
+				var scale = chart.scales.foo;
+				scale.ctx = window.createMockContext();
+				chart.draw();
+
+				expect(scale.ctx.getCalls().length).toBeGreaterThan(0);
+				expect(scale.width).toBeGreaterThan(0);
+			});
+
+			it('should not draw the axes if no associated datasets are visible', function() {
+				var chart = window.acquireChart({
+					type: 'line',
+					data: {
+						datasets: [{
+							data: [100, 200, 100, 50],
+							yAxisId: 'foo',
+							hidden: true,
+							labels: ['Q1', 'Q2', 'Q3', 'Q4']
+						}]
+					},
+					options: {
+						scales: {
+							yAxes: [{
+								id: 'foo',
+								display: 'auto'
+							}]
+						}
+					}
+				});
+
+				var scale = chart.scales.foo;
+				scale.ctx = window.createMockContext();
+				chart.draw();
+
+				expect(scale.ctx.getCalls().length).toBe(0);
+				expect(scale.width).toBe(0);
+			});
+		});
+	});
 });