From: Evert Timberg Date: Fri, 3 Jan 2020 18:56:11 +0000 (-0500) Subject: Remove HTML legend that is mostly unsupported. (#6887) X-Git-Tag: v3.0.0-alpha~165 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e96ad6f2491db9e7a94f734ca09330b296d47f52;p=thirdparty%2FChart.js.git 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 bbfe362ef..a61943275 100644 --- 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 01b10801c..52df45484 100644 --- 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 379863d80..db9d5e03f 100644 --- 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 49a7f843b..9db7db9b4 100644 --- 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 518b8d3d5..bf287f127 100644 --- 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 4b1606403..90b103bca 100644 --- 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 12f71afd9..cde22941e 100644 --- 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 4da3d4ae1..c59a8ab56 100644 --- 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 = ''; - 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 = ''; - expect(chart.generateLegend()).toBe(expectedLegend); - }); - it('should return correct legend label objects', function() { var config = Chart.defaults.polarArea; var chart = window.acquireChart({