Enable custom sorting of the legend items (#7851)

diff --git a/docs/docs/configuration/legend.md b/docs/docs/configuration/legend.md
index 3c6c897e0fe34825a67252088bfb51d7afdcbf01..ff6791d78a9f0c5486c87fceeabd4a537198a9c3 100644 (file)
--- a/docs/docs/configuration/legend.md
+++ b/docs/docs/configuration/legend.md
@@ -54,6 +54,7 @@ The legend label configuration is nested below the legend configuration using th
 | `padding` | `number` | `10` | Padding between rows of colored boxes.
 | `generateLabels` | `function` | | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See [Legend Item](#legend-item-interface) for details.
 | `filter` | `function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data.
+| `sort` | `function` | `null` | Sorts legend items. Receives 3 parameters, two [Legend Items](#legend-item-interface) and the chart data.
 | `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the mimimum value between boxWidth and font.size).
 
 ## Legend Title Configuration

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index 0bd8d1d1af60c52cbd613fea6eee9eae7a934d87..ac3902094bbaaf7bef4051102412cee3486d214e 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -160,6 +160,10 @@ export class Legend extends Element {
                        legendItems = legendItems.filter((item) => labelOpts.filter(item, me.chart.data));
                }
 
+               if (labelOpts.sort) {
+                       legendItems = legendItems.sort((a, b) => labelOpts.sort(a, b, me.chart.data));
+               }
+
                if (me.options.reverse) {
                        legendItems.reverse();
                }

diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js
index bb1121f87956efe32e5943d55e43442dc2bbdcb1..738e8516754503d477ffca4970934fca6a954ea0 100644 (file)
--- a/test/specs/plugin.legend.tests.js
+++ b/test/specs/plugin.legend.tests.js
@@ -311,6 +311,85 @@ describe('Legend block tests', function() {
                }]);
        });
 
+       it('should sort items', function() {
+               var chart = window.acquireChart({
+                       type: 'line',
+                       data: {
+                               datasets: [{
+                                       label: 'dataset1',
+                                       backgroundColor: '#f31',
+                                       borderCapStyle: 'round',
+                                       borderDash: [2, 2],
+                                       borderDashOffset: 5.5,
+                                       data: []
+                               }, {
+                                       label: 'dataset2',
+                                       hidden: true,
+                                       borderJoinStyle: 'round',
+                                       data: []
+                               }, {
+                                       label: 'dataset3',
+                                       borderWidth: 10,
+                                       borderColor: 'green',
+                                       pointStyle: 'crossRot',
+                                       fill: false,
+                                       data: []
+                               }],
+                               labels: []
+                       },
+                       options: {
+                               legend: {
+                                       labels: {
+                                               sort: function(a, b) {
+                                                       return b.datasetIndex > a.datasetIndex ? 1 : -1;
+                                               }
+                                       }
+                               }
+                       }
+               });
+
+               expect(chart.legend.legendItems).toEqual([{
+                       text: 'dataset3',
+                       fillStyle: 'rgba(0,0,0,0.1)',
+                       hidden: false,
+                       lineCap: 'butt',
+                       lineDash: [],
+                       lineDashOffset: 0,
+                       lineJoin: 'miter',
+                       lineWidth: 10,
+                       strokeStyle: 'green',
+                       pointStyle: undefined,
+                       rotation: undefined,
+                       datasetIndex: 2
+               }, {
+                       text: 'dataset2',
+                       fillStyle: 'rgba(0,0,0,0.1)',
+                       hidden: true,
+                       lineCap: 'butt',
+                       lineDash: [],
+                       lineDashOffset: 0,
+                       lineJoin: 'round',
+                       lineWidth: 3,
+                       strokeStyle: 'rgba(0,0,0,0.1)',
+                       pointStyle: undefined,
+                       rotation: undefined,
+                       datasetIndex: 1
+               }, {
+                       text: 'dataset1',
+                       fillStyle: '#f31',
+                       hidden: false,
+                       lineCap: 'round',
+                       lineDash: [2, 2],
+                       lineDashOffset: 5.5,
+                       lineJoin: 'miter',
+                       lineWidth: 3,
+                       strokeStyle: 'rgba(0,0,0,0.1)',
+                       pointStyle: undefined,
+                       rotation: undefined,
+                       datasetIndex: 0
+               }]);
+       });
+
        it('should not throw when the label options are missing', function() {
                var makeChart = function() {
                        window.acquireChart({

diff --git a/types/plugins/index.d.ts b/types/plugins/index.d.ts
index efa0eda00edc17b16d1ebb8ececd913651c382cc..414d3f90775f53b60e7713c76e939adab5559757 100644 (file)
--- a/types/plugins/index.d.ts
+++ b/types/plugins/index.d.ts
@@ -165,6 +165,11 @@ export interface ILegendOptions {
      */
     filter(item: ILegendItem, data: IChartData): boolean;
 
+    /**
+     * Sorts the legend items
+     */
+    sort(a: ILegendItem, b: ILegendItem, data: IChartData): number;
+
     /**
      * Label style will match corresponding point style (size is based on the mimimum value between boxWidth and font.size).
      * @default false