Skip to content
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

Jump to bottom

allow multiple lines of text in the line label #129

Merged
merged 8 commits into from
Apr 30, 2019
Merged

allow multiple lines of text in the line label #129

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
223d6ce
adding changes to allow multiple lines of text in the line label by u…
aoifef Jul 23, 2018
60b14a3
addressing pr comments
aoifef Dec 11, 2018
523d9d6
Merge remote-tracking branch 'upstream/master' into line-label-multip…
Apr 2, 2019
b973bf9
fixing format issues
Apr 2, 2019
7d4912b
changes to allow use of an array instead of \n
Apr 30, 2019
ff53584
Delete vcs.xml
aoifef Apr 30, 2019
6974e37
changing y padding
Apr 30, 2019
5e5b302
Merge branch 'line-label-multiple-lines' of https://github.com/aoifef…
Apr 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ Vertical or horizontal lines are supported.
// Whether the label is enabled and should be displayed
enabled: false,

// Text to display in label - default is null
// Text to display in label - default is null. Provide an array to display values on a new line
content: "Test label"
},

Expand Down
44 changes: 36 additions & 8 deletions src/types/line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,12 +157,25 @@ module.exports = function(Chart) {

ctx.font = chartHelpers.fontString(model.labelFontSize, model.labelFontStyle, model.labelFontFamily);
var textWidth = ctx.measureText(model.labelContent).width;
var textHeight = ctx.measureText('M').width;
var textHeight = model.labelFontSize;
model.labelHeight = textHeight + (2 * model.labelYPadding);

if (model.labelContent && chartHelpers.isArray(model.labelContent)) {
var labelContentArray = model.labelContent.slice(0);
var longestLabel = labelContentArray.sort(function(a, b) {
return b.length - a.length;
})[0];
textWidth = ctx.measureText(longestLabel).width;

model.labelHeight = (textHeight * model.labelContent.length) + (2 * model.labelYPadding);
// Add padding in between each label item
model.labelHeight += 5 * (model.labelContent.length - 1);
Copy link
Collaborator

@benmccann benmccann Apr 30, 2019 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use model.labelYPadding instead of hard coding 5? (same below on line 282)

}

var labelPosition = calculateLabelPosition(model, textWidth, textHeight, model.labelXPadding, model.labelYPadding);
model.labelX = labelPosition.x - model.labelXPadding;
model.labelY = labelPosition.y - model.labelYPadding;
model.labelWidth = textWidth + (2 * model.labelXPadding);
model.labelHeight = textHeight + (2 * model.labelYPadding);

model.borderColor = options.borderColor;
model.borderWidth = options.borderWidth;
Expand Down Expand Up @@ -255,12 +268,27 @@ module.exports = function(Chart) {
);
ctx.fillStyle = view.labelFontColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(
view.labelContent,
view.labelX + (view.labelWidth / 2),
view.labelY + (view.labelHeight / 2)
);

if (view.labelContent && chartHelpers.isArray(view.labelContent)) {
var textYPosition = view.labelY + view.labelYPadding;
for (var i = 0; i < view.labelContent.length; i++) {
ctx.textBaseline = 'top';
ctx.fillText(
view.labelContent[i],
view.labelX + (view.labelWidth / 2),
textYPosition
);

textYPosition += view.labelFontSize + 5;
}
} else {
ctx.textBaseline = 'middle';
ctx.fillText(
view.labelContent,
view.labelX + (view.labelWidth / 2),
view.labelY + (view.labelHeight / 2)
);
}
}

ctx.restore();
Expand Down