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

Show file tree
Hide file tree
Changes from 8 commits
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
2 changes: 1 addition & 1 deletion docs/configuration/legend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ The legend label configuration is nested below the legend configuration using th
| `padding` | `Number` | `10` | Padding between rows of colored boxes.
| `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.
| `usePointStyle` | `Boolean` | `false` | Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
| `usePointStyle` | `Boolean` | `false` | Label box style will match corresponding point style (size is based on mimimum value between boxWidth and fontSize).

## Legend Item Interface

Expand Down
12 changes: 6 additions & 6 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 ?
fontSize * Math.SQRT2 :
return labelOpts.usePointStyle && labelOpts.boxWidth > fontSize ?
fontSize :
labelOpts.boxWidth;
}

Expand Down Expand Up @@ -369,10 +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 = fontSize * Math.SQRT2 / 2;
var offSet = radius / Math.SQRT2;
var centerX = x + offSet;
var centerY = y + offSet;
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