diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index ece5ceb7037..2392f9b2ced 100644 --- a/docs/configuration/legend.md +++ b/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 diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js index 54ce2cd54f6..96e470ef3fa 100644 --- a/src/helpers/helpers.canvas.js +++ b/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); diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 02fa12ae1a8..8b98481cdb9 100644 --- a/src/plugins/plugin.legend.js +++ b/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: diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js index 9c7f340f13e..ddd76d4d88f 100644 --- a/test/specs/plugin.legend.tests.js +++ b/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) },