Skip to content

Commit 24c52e0

Browse files
Alfie Hopkinjonrimmer
authored andcommitted
Enhance legend label color point when usePointStyle is true (chartjs#6006)
1 parent 4e80692 commit 24c52e0

File tree

2 files changed

+6
-7
lines changed

2 files changed

+6
-7
lines changed

docs/configuration/legend.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ The legend label configuration is nested below the legend configuration using th
3636
| `padding` | `number` | `10` | Padding between rows of colored boxes.
3737
| `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.
3838
| `filter` | `function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data.
39-
| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
39+
| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the mimimum value between boxWidth and fontSize).
4040

4141
## Legend Item Interface
4242

src/plugins/plugin.legend.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,8 @@ defaults._set('global', {
9191
* @return {Number} width of the color box area
9292
*/
9393
function getBoxWidth(labelOpts, fontSize) {
94-
return labelOpts.usePointStyle ?
95-
fontSize * Math.SQRT2 :
94+
return labelOpts.usePointStyle && labelOpts.boxWidth > fontSize ?
95+
fontSize :
9696
labelOpts.boxWidth;
9797
}
9898

@@ -375,10 +375,9 @@ var Legend = Element.extend({
375375
if (opts.labels && opts.labels.usePointStyle) {
376376
// Recalculate x and y for drawPoint() because its expecting
377377
// x and y to be center of figure (instead of top left)
378-
var radius = fontSize * Math.SQRT2 / 2;
379-
var offSet = radius / Math.SQRT2;
380-
var centerX = x + offSet;
381-
var centerY = y + offSet;
378+
var radius = boxWidth * Math.SQRT2 / 2;
379+
var centerX = x + boxWidth / 2;
380+
var centerY = y + fontSize / 2;
382381

383382
// Draw pointStyle as legend symbol
384383
helpers.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);

0 commit comments

Comments
 (0)