use boxWidth for legend usePointStyle line or rect

docs/configuration/legend.md

@@ -65,7 +65,7 @@ Namespace: `options.plugins.legend.labels`
 | `sort` | `function` | `null` | Sorts legend items. Type is : `sort(a: LegendItem, b: LegendItem, data: ChartData): number;`. Receives 3 parameters, two [Legend Items](#legend-item-interface) and the chart data. The return value of the function is a number that indicates the order of the two legend item parameters. The ordering matches the [return value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description) of `Array.prototype.sort()` 
 | [`pointStyle`](elements.md#point-styles) | [`pointStyle`](elements.md#types) | `'circle'` | If specified, this style of point is used for the legend. Only used if `usePointStyle` is true.
 | `textAlign` | `string` | `'center'` | Horizontal alignment of the label text. Options are: `'left'`, `'right'` or `'center'`.
-| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the minimum value between boxWidth and font.size).
+| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the minimum value between boxWidth and font.size except for pointStyle `'rect'` and `'line'` where size is based on boxWidth if it is defined. ).
 
 ## Legend Title Configuration
 

src/helpers/helpers.canvas.js

@@ -126,8 +126,8 @@ export function clearCanvas(canvas, ctx) {
   ctx.restore();
 }
 
-export function drawPoint(ctx, options, x, y) {
-  let type, xOffset, yOffset, size, cornerRadius;
+export function drawPoint(ctx, options, x, y, w) {
+  let type, xOffset, yOffset, size, cornerRadius, width;
   const style = options.pointStyle;
   const rotation = options.rotation;
   const radius = options.radius;
@@ -186,7 +186,8 @@ export function drawPoint(ctx, options, x, y) {
   case 'rect':
     if (!rotation) {
       size = Math.SQRT1_2 * radius;
-      ctx.rect(x - size, y - size, 2 * size, 2 * size);
+      width = w ? w / 2 : size;
+      ctx.rect(x - width, y - size, 2 * width, 2 * size);
       break;
     }
     rad += QUARTER_PI;
@@ -227,7 +228,7 @@ export function drawPoint(ctx, options, x, y) {
     ctx.lineTo(x - yOffset, y + xOffset);
     break;
   case 'line':
-    xOffset = Math.cos(rad) * radius;
+    xOffset = w ? w / 2 : Math.cos(rad) * radius;
     yOffset = Math.sin(rad) * radius;
     ctx.moveTo(x - xOffset, y - yOffset);
     ctx.lineTo(x + xOffset, y + yOffset);

src/plugins/plugin.legend.js

@@ -14,11 +14,11 @@ import {toTRBLCorners} from '../helpers/helpers.options';
  */
 
 const getBoxSize = (labelOpts, fontSize) => {
-  let {boxHeight = fontSize, boxWidth = fontSize} = labelOpts;
+  let {boxHeight = fontSize, boxWidth = 40} = labelOpts;
 
   if (labelOpts.usePointStyle) {
     boxHeight = Math.min(boxHeight, fontSize);
-    boxWidth = Math.min(boxWidth, fontSize);
+    boxWidth = labelOpts.boxWidth || Math.min(boxWidth, fontSize);
   }
 
   return {
@@ -316,7 +316,7 @@ export class Legend extends Element {
         // Recalculate x and y for drawPoint() because its expecting
         // x and y to be center of figure (instead of top left)
         const drawOptions = {
-          radius: boxWidth * Math.SQRT2 / 2,
+          radius: boxHeight * Math.SQRT2 / 2,
           pointStyle: legendItem.pointStyle,
           rotation: legendItem.rotation,
           borderWidth: lineWidth
@@ -325,7 +325,7 @@ export class Legend extends Element {
         const centerY = y + halfFontSize;
 
         // Draw pointStyle as legend symbol
-        drawPoint(ctx, drawOptions, centerX, centerY);
+        drawPoint(ctx, drawOptions, centerX, centerY, boxWidth);
       } else {
         // Draw box as legend symbol
         // Adjust position when boxHeight < fontSize (want it centered)
@@ -622,7 +622,7 @@ export default {
 
     labels: {
       color: (ctx) => ctx.chart.options.color,
-      boxWidth: 40,
+      // boxWidth: default is 40,
       padding: 10,
       // Generates labels shown in the legend
       // Valid properties to return:

test/specs/plugin.legend.tests.js

@@ -18,7 +18,6 @@ describe('Legend block tests', function() {
 
       labels: {
         color: jasmine.any(Function),
-        boxWidth: 40,
         padding: 10,
         generateLabels: jasmine.any(Function)
       },