Add API to change data visibility (#6907)

diff --git a/docs/developers/api.md b/docs/developers/api.md
index 52df4548459dd7ecbdb46ab185798eb54ff93fd2..4581d576b3e000749513476e6092548cce1551e6 100644 (file)
--- a/docs/developers/api.md
+++ b/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
+```
\ No newline at end of file

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 5cb90919751dd3ba4687a40ab37aa37d933a99d1..81aaa9ceba116e5d8f53fa82f6dbd0ad43e35a39 100644 (file)
--- a/src/core/core.controller.js
+++ b/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
         */

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index d8b59930e7c1b94bd58aacf038306429226380ca..58ea472793d92ef99c2963e6fe043ad8bd0423d5 100644 (file)
--- a/test/specs/core.controller.tests.js
+++ b/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);
+               });
+       });
 });