Remove HTML legend that is mostly unsupported. (#6887)

* Remove HTML legend that is mostly unsupported.

Resolves the discussion in #5070

* Add migration docs

diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md
index bbfe362ef044e4517b3d91f0f49e5e363da4dc6c..a61943275d2d6c8a64df578279b665c8c4f7bc16 100644 (file)
--- a/docs/configuration/legend.md
+++ b/docs/configuration/legend.md
@@ -169,23 +169,3 @@ var chart = new Chart(ctx, {
 ```
 
 Now when you click the legend in this chart, the visibility of the first two datasets will be linked together.
-
-## HTML Legends
-
-Sometimes you need a very complex legend. In these cases, it makes sense to generate an HTML legend. Charts provide a `generateLegend()` method on their prototype that returns an HTML string for the legend.
-
-To configure how this legend is generated, you can change the `legendCallback` config property.
-
-```javascript
-var chart = new Chart(ctx, {
-    type: 'line',
-    data: data,
-    options: {
-        legendCallback: function(chart) {
-            // Return the HTML string here.
-        }
-    }
-});
-```
-
-Note that legendCallback is not called automatically and you must call `generateLegend()` yourself in code when creating a legend using this method.

diff --git a/docs/developers/api.md b/docs/developers/api.md
index 01b10801c34157fcbb6990901a375e778a59e92f..52df4548459dd7ecbdb46ab185798eb54ff93fd2 100644 (file)
--- a/docs/developers/api.md
+++ b/docs/developers/api.md
@@ -89,15 +89,6 @@ myLineChart.toBase64Image();
 // => returns png data url of the image on the canvas
 ```
 
-## .generateLegend()
-
-Returns an HTML string of a legend for that chart. The legend is generated from the `legendCallback` in the options.
-
-```javascript
-myLineChart.generateLegend();
-// => returns HTML string of a legend for this chart
-```
-
 ## .getElementAtEvent(e)
 
 Calling `getElementAtEvent(event)` on your Chart instance passing an argument of an event, or jQuery event, will return the single element at the event position. If there are multiple items within range, only the first is returned. The value returned from this method is an array with a single parameter. An array is used to keep a consistent API between the `get*AtEvent` methods.

diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md
index 379863d8009d7489c820a303fcda88a4e7212a61..db9d5e03ff85907a5f46202cff986d2ba23cc97e 100644 (file)
--- a/docs/getting-started/v3-migration.md
+++ b/docs/getting-started/v3-migration.md
@@ -62,6 +62,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 
 * `Chart.chart.chart`
 * `Chart.Controller`
+* `Chart.prototype.generateLegend`
 * `Chart.types`
 * `DatasetController.addElementAndReset`
 * `DatasetController.createMetaData`

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index 49a7f843b1abc71b0c6ac5f739aa11e3780aa19c..9db7db9b491b87c359f01b2a0a96db5e75aacbd1 100644 (file)
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -22,27 +22,6 @@ defaults._set('doughnut', {
                // Boolean - Whether we animate scaling the Doughnut from the centre
                animateScale: false
        },
-       legendCallback: function(chart) {
-               var list = document.createElement('ul');
-               var data = chart.data;
-               var datasets = data.datasets;
-               var labels = data.labels;
-               var i, ilen, listItem, listItemSpan;
-
-               list.setAttribute('class', chart.id + '-legend');
-               if (datasets.length) {
-                       for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {
-                               listItem = list.appendChild(document.createElement('li'));
-                               listItemSpan = listItem.appendChild(document.createElement('span'));
-                               listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
-                               if (labels[i]) {
-                                       listItem.appendChild(document.createTextNode(labels[i]));
-                               }
-                       }
-               }
-
-               return list.outerHTML;
-       },
        legend: {
                labels: {
                        generateLabels: function(chart) {

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 518b8d3d5572b72e70eecf7ca1c9a21f9e5eb4c0..bf287f1276e8c2abd1de6ded4be5a120733c1c44 100644 (file)
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -33,27 +33,6 @@ defaults._set('polarArea', {
        },
 
        startAngle: -0.5 * Math.PI,
-       legendCallback: function(chart) {
-               var list = document.createElement('ul');
-               var data = chart.data;
-               var datasets = data.datasets;
-               var labels = data.labels;
-               var i, ilen, listItem, listItemSpan;
-
-               list.setAttribute('class', chart.id + '-legend');
-               if (datasets.length) {
-                       for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {
-                               listItem = list.appendChild(document.createElement('li'));
-                               listItemSpan = listItem.appendChild(document.createElement('span'));
-                               listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
-                               if (labels[i]) {
-                                       listItem.appendChild(document.createTextNode(labels[i]));
-                               }
-                       }
-               }
-
-               return list.outerHTML;
-       },
        legend: {
                labels: {
                        generateLabels: function(chart) {

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 4b1606403276f40c3547f77e2558bf411b29b9af..90b103bca5c17a2bcdc64fd3134ba4f8b73a6144 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -828,10 +828,6 @@ class Chart {
                return typeof meta.hidden === 'boolean' ? !meta.hidden : !this.data.datasets[datasetIndex].hidden;
        }
 
-       generateLegend() {
-               return this.options.legendCallback(this);
-       }
-
        /**
         * @private
         */

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index 12f71afd9338edcb7119497a2101181061dfa1d6..cde22941e1d6f26ceba57ed42df5bf1b191a8835 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -74,25 +74,6 @@ defaults._set('global', {
                                }, this);
                        }
                }
-       },
-
-       legendCallback: function(chart) {
-               var list = document.createElement('ul');
-               var datasets = chart.data.datasets;
-               var i, ilen, listItem, listItemSpan;
-
-               list.setAttribute('class', chart.id + '-legend');
-
-               for (i = 0, ilen = datasets.length; i < ilen; i++) {
-                       listItem = list.appendChild(document.createElement('li'));
-                       listItemSpan = listItem.appendChild(document.createElement('span'));
-                       listItemSpan.style.backgroundColor = datasets[i].backgroundColor;
-                       if (datasets[i].label) {
-                               listItem.appendChild(document.createTextNode(datasets[i].label));
-                       }
-               }
-
-               return list.outerHTML;
        }
 });
 

diff --git a/test/specs/global.defaults.tests.js b/test/specs/global.defaults.tests.js
index 4da3d4ae18b5769d98d3eb19d9968de3e3be19f2..c59a8ab56ba8060b019186ec7ff821dfe17cb16a 100644 (file)
--- a/test/specs/global.defaults.tests.js
+++ b/test/specs/global.defaults.tests.js
@@ -88,24 +88,6 @@ describe('Default Configs', function() {
                        }]);
                });
 
-               it('should return the correct html legend', function() {
-                       var config = Chart.defaults.doughnut;
-                       var chart = window.acquireChart({
-                               type: 'doughnut',
-                               data: {
-                                       labels: ['label1', 'label2'],
-                                       datasets: [{
-                                               data: [10, 20],
-                                               backgroundColor: ['red', 'green']
-                                       }]
-                               },
-                               options: config
-                       });
-
-                       var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color: red;"></span>label1</li><li><span style="background-color: green;"></span>label2</li></ul>';
-                       expect(chart.generateLegend()).toBe(expectedLegend);
-               });
-
                it('should return correct legend label objects', function() {
                        var config = Chart.defaults.doughnut;
                        var chart = window.acquireChart({
@@ -204,24 +186,6 @@ describe('Default Configs', function() {
                        }]);
                });
 
-               it('should return the correct html legend', function() {
-                       var config = Chart.defaults.polarArea;
-                       var chart = window.acquireChart({
-                               type: 'polarArea',
-                               data: {
-                                       labels: ['label1', 'label2'],
-                                       datasets: [{
-                                               data: [10, 20],
-                                               backgroundColor: ['red', 'green']
-                                       }]
-                               },
-                               options: config
-                       });
-
-                       var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color: red;"></span>label1</li><li><span style="background-color: green;"></span>label2</li></ul>';
-                       expect(chart.generateLegend()).toBe(expectedLegend);
-               });
-
                it('should return correct legend label objects', function() {
                        var config = Chart.defaults.polarArea;
                        var chart = window.acquireChart({