Enable overriding the legend pointStyle using new `pointStyle` option (#7959)

diff --git a/docs/docs/configuration/legend.md b/docs/docs/configuration/legend.md
index c9532a5bf9b25dca2946b7c90224437653669006..d130057de60fb568434d3dd89cc96737ed75b230 100644 (file)
--- a/docs/docs/configuration/legend.md
+++ b/docs/docs/configuration/legend.md
@@ -57,6 +57,7 @@ The legend label configuration is nested below the legend configuration using th
 | `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.
+| `pointStyle` | | | If specified, this style of point is used for the legend. Only used if `usePointStyle` is true.
 | `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the minimum value between boxWidth and font.size).
 
 ## Legend Title Configuration

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index c5de3d9c20432e1cd5b592b8cb2d4ac543729366..0329570d3a839820966d63c03c9caed9c913466b 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -740,8 +740,9 @@ export default {
                        // lineWidth :
                        generateLabels(chart) {
                                const datasets = chart.data.datasets;
-                               const options = chart.options.legend || {};
-                               const usePointStyle = options.labels && options.labels.usePointStyle;
+                               const {labels} = chart.legend.options;
+                               const usePointStyle = labels.usePointStyle;
+                               const overrideStyle = labels.pointStyle;
 
                                return chart._getSortedDatasetMetas().map((meta) => {
                                        const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
@@ -756,7 +757,7 @@ export default {
                                                lineJoin: style.borderJoinStyle,
                                                lineWidth: style.borderWidth,
                                                strokeStyle: style.borderColor,
-                                               pointStyle: style.pointStyle,
+                                               pointStyle: overrideStyle || style.pointStyle,
                                                rotation: style.rotation,
 
                                                // Below is extra data used for toggling the datasets

diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js
index 738e8516754503d477ffca4970934fca6a954ea0..cc6c17fa0972372b78e113c3e297e46be1c4a788 100644 (file)
--- a/test/specs/plugin.legend.tests.js
+++ b/test/specs/plugin.legend.tests.js
@@ -622,6 +622,74 @@ describe('Legend block tests', function() {
                }]);
        });
 
+       it('should draw correctly when usePointStyle is true and pointStyle override is set', function() {
+               var chart = window.acquireChart({
+                       type: 'line',
+                       data: {
+                               datasets: [{
+                                       label: 'dataset1',
+                                       backgroundColor: '#f31',
+                                       borderCapStyle: 'butt',
+                                       borderDash: [2, 2],
+                                       borderDashOffset: 5.5,
+                                       borderWidth: 0,
+                                       borderColor: '#f31',
+                                       pointStyle: 'crossRot',
+                                       pointBackgroundColor: 'rgba(0,0,0,0.1)',
+                                       pointBorderWidth: 5,
+                                       pointBorderColor: 'green',
+                                       data: []
+                               }, {
+                                       label: 'dataset2',
+                                       backgroundColor: '#f31',
+                                       borderJoinStyle: 'miter',
+                                       borderWidth: 2,
+                                       borderColor: '#f31',
+                                       pointStyle: 'crossRot',
+                                       pointRotation: 15,
+                                       data: []
+                               }],
+                               labels: []
+                       },
+                       options: {
+                               legend: {
+                                       labels: {
+                                               usePointStyle: true,
+                                               pointStyle: 'star'
+                                       }
+                               }
+                       }
+               });
+
+               expect(chart.legend.legendItems).toEqual([{
+                       text: 'dataset1',
+                       fillStyle: 'rgba(0,0,0,0.1)',
+                       hidden: false,
+                       lineCap: undefined,
+                       lineDash: undefined,
+                       lineDashOffset: undefined,
+                       lineJoin: undefined,
+                       lineWidth: 5,
+                       strokeStyle: 'green',
+                       pointStyle: 'star',
+                       rotation: undefined,
+                       datasetIndex: 0
+               }, {
+                       text: 'dataset2',
+                       fillStyle: '#f31',
+                       hidden: false,
+                       lineCap: undefined,
+                       lineDash: undefined,
+                       lineDashOffset: undefined,
+                       lineJoin: undefined,
+                       lineWidth: 2,
+                       strokeStyle: '#f31',
+                       pointStyle: 'star',
+                       rotation: 15,
+                       datasetIndex: 1
+               }]);
+       });
+
        describe('config update', function() {
                it ('should update the options', function() {
                        var chart = acquireChart({

diff --git a/types/plugins/index.d.ts b/types/plugins/index.d.ts
index 0c0e8a701592d53e2eef1a3ef162cb9e3d8b2bd8..2a28b848ca447c6a8f7e126fe8601390c5f48113 100644 (file)
--- a/types/plugins/index.d.ts
+++ b/types/plugins/index.d.ts
@@ -170,6 +170,11 @@ export interface ILegendOptions {
      */
     sort(a: ILegendItem, b: ILegendItem, data: IChartData): number;
 
+    /**
+     * Override point style for the legend. Only applies if usePointStyle is true
+     */
+    pointStyle: PointStyle;
+
     /**
      * Label style will match corresponding point style (size is based on the mimimum value between boxWidth and font.size).
      * @default false