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 1 commit
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
Expand Up @@ -139,7 +139,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. Use \n to take a new line
content: "Test label"
},

Expand Down
45 changes: 37 additions & 8 deletions src/types/line.js
View file
Open in desktop
Expand Up @@ -155,12 +155,24 @@ 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 !== null && model.labelContent.indexOf("\n") !== -1) {
aoifef marked this conversation as resolved.
Show resolved Hide resolved
var labelContentArray = model.labelContent.split("\n");

var longestLabel = labelContentArray.sort(function (a, b) { return b.length - a.length; })[0];
aoifef marked this conversation as resolved.
Show resolved Hide resolved
textWidth = ctx.measureText(longestLabel).width;

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

Choose a reason for hiding this comment

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

add a space after // and remove extraneous word "for"

model.labelHeight += (5 * (labelContentArray.length - 1));
aoifef marked this conversation as resolved.
Show resolved Hide resolved
}

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 @@ -253,12 +265,29 @@ 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 !== null && view.labelContent.indexOf("\n") !== -1) {
aoifef marked this conversation as resolved.
Show resolved Hide resolved
var textYPosition = view.labelY + view.labelYPadding;
var labelContentArray = view.labelContent.split("\n");

for(var i = 0; i < labelContentArray.length; i++) {
aoifef marked this conversation as resolved.
Show resolved Hide resolved
ctx.textBaseline = 'top';
ctx.fillText(
labelContentArray[i],
view.labelX + (view.labelWidth / 2),
textYPosition
);

textYPosition += (view.labelFontSize + 5);
Copy link
Collaborator

Choose a reason for hiding this comment

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

these parentheses are unnecessary

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

ctx.restore();
Expand Down