Add API to change data visibility (#6907)

docs/developers/api.md

@@ -147,3 +147,21 @@ Extensive examples of usage are available in the [Chart.js tests](https://github
 var meta = myChart.getDatasetMeta(0);
 var x = meta.data[0].x;
 ```
+
+## setDatasetVisibility(datasetIndex, visibility)
+
+Sets the visibility for a given dataset. This can be used to build a chart legend in HTML. During click on one of the HTML items, you can call `setDatasetVisibility` to change the appropriate dataset.
+
+```javascript
+chart.setDatasetVisibility(1, false); // hides dataset at index 1
+chart.update(); // chart now renders with dataset hidden
+```
+
+## setDataVisibility(datasetIndex, index, visibility)
+
+Like [setDatasetVisibility](#setdatasetvisibility) except that it hides only a single item in the dataset. **Note** this only applies to polar area and doughnut charts at the moment. It will have no affect on line, bar, radar, or scatter charts.
+
+```javascript
+chart.setDataVisibility(0, 2, false); // hides the item in dataset 0, at index 2
+chart.update(); // chart now renders with item hidden
+```

src/core/core.controller.js

@@ -810,6 +810,19 @@ class Chart {
 		return typeof meta.hidden === 'boolean' ? !meta.hidden : !this.data.datasets[datasetIndex].hidden;
 	}
 
+	setDatasetVisibility(datasetIndex, visible) {
+		const meta = this.getDatasetMeta(datasetIndex);
+		meta.hidden = !visible;
+	}
+
+	setDataVisibility(datasetIndex, index, visible) {
+		const meta = this.getDatasetMeta(datasetIndex);
+
+		if (meta.data[index]) {
+			meta.data[index].hidden = !visible;
+		}
+	}
+
 	/**
 	 * @private
 	 */

test/specs/core.controller.tests.js

@@ -1347,4 +1347,39 @@ describe('Chart', function() {
 			expect(metasets[3].order).toEqual(3);
 		});
 	});
+
+	describe('data visibility', function() {
+		it('should hide a dataset', function() {
+			var chart = acquireChart({
+				type: 'line',
+				data: {
+					datasets: [{
+						data: [0, 1, 2]
+					}],
+					labels: ['a', 'b', 'c']
+				}
+			});
+
+			chart.setDatasetVisibility(0, false);
+
+			var meta = chart.getDatasetMeta(0);
+			expect(meta.hidden).toBe(true);
+		});
+
+		it('should hide a single data item', function() {
+			var chart = acquireChart({
+				type: 'polarArea',
+				data: {
+					datasets: [{
+						data: [1, 2, 3]
+					}]
+				}
+			});
+
+			chart.setDataVisibility(0, 1, false);
+
+			var meta = chart.getDatasetMeta(0);
+			expect(meta.data[1].hidden).toBe(true);
+		});
+	});
 });