Skip to content

Enhance legend label color point when usePointStyle is true #6006

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Feb 10, 2019
Merged

Enhance legend label color point when usePointStyle is true #6006

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1c2857f
Allow custom pointStyle size
Jan 22, 2019
2989223
Fixed positioning of legend box
Jan 23, 2019
e1846e7
Changed circleSize to pointSize
Jan 24, 2019
12e69ab
Added pointSize to documentation
Jan 24, 2019
c635ddc
Removed parenthesis from code
Jan 24, 2019
ceb5b20
Fix using custom point size in legend
Jan 25, 2019
80f117d
Updated legend docs to match custom box size change
Jan 25, 2019
b6acb9f
Removed unnecessary Math.SQRT2
Jan 25, 2019
c50318d
Removed unneeded code
Jan 27, 2019
ee54e97
Merge branch 'master' into master
Feb 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix using custom point size in legend 
Takes min value from boxSize and fontSize when using point styles for legend boxes, and correctly displays them on the screen.
  • Loading branch information
Alfie Hopkin authored Jan 25, 2019
commit ceb5b2050490282fba6015e44da6fb7c98d641c0
11 changes: 6 additions & 5 deletions src/plugins/plugin.legend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,8 @@ defaults._set('global', {
* @return {Number} width of the color box area
*/
function getBoxWidth(labelOpts, fontSize) {
return labelOpts.usePointStyle ?
labelOpts.pointSize || fontSize * Math.SQRT2 :
return labelOpts.usePointStyle && labelOpts.boxWidth > fontSize ?
fontSize * Math.SQRT2 :
labelOpts.boxWidth;
}

Expand Down Expand Up @@ -369,9 +369,10 @@ var Legend = Element.extend({
if (opts.labels && opts.labels.usePointStyle) {
// Recalculate x and y for drawPoint() because its expecting
// x and y to be center of figure (instead of top left)
var radius = boxWidth * Math.SQRT2 / 2;
var centerX = x + (fontSize / 2);
var centerY = y + (fontSize / 2);
var pointWidth = Math.min(boxWidth, fontSize);
var radius = pointWidth * Math.SQRT2 / 2;
var centerX = x + pointWidth / 2;
var centerY = y + fontSize / 2;

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