allow multiple lines of text in the line label #129

aoifef · 2018-07-23T15:18:12Z

Using "\n" in the label content will allow the user to take new lines for the line label.

…sing \n

mheiduk · 2018-08-23T14:51:19Z

Would be great if this change can be merged!

zreese · 2018-09-17T15:52:18Z

omg someone please merge this. 😓

alex2wong · 2018-09-27T07:27:02Z

@zreese @mheiduk it seems ... Nobody is actively maintaining this repo.. few pr have been merged since this year. @benmccann could you pls take a look at the prs. thanks a lot : )

ffoxwell · 2018-11-15T09:00:21Z

This functionality would be really beneficial, could we please get this merged?

src/types/line.js

benmccann · 2018-11-15T17:23:08Z

@alex2wong I am not a maintainer of this repo and do not have merge rights. You could try the #dev Slack channel for Chart.js perhaps

src/types/line.js

simonbrunel · 2018-12-12T16:24:56Z

@benmccann I added you as collaborator to this repository (I thought it was already the case).

@ All: we are looking for new maintainers for the annotation and zoom plugins, so if you are interested, please reach us on the #dev room of our Slack.

benmccann · 2018-12-13T06:16:44Z

src/types/line.js

-					view.labelY + (view.labelHeight / 2)
-				);
+
+				if (view.labelContent !== null && view.labelContent.indexOf("\n") !== -1) {


do we need this if/else check? view.labelContent.split("\n") will return an array with a single element and then it should be able to be processed just like if there were multiple elements

benmccann · 2018-12-13T06:17:14Z

src/types/line.js

+			    textWidth = ctx.measureText(longestLabel).width;
+
+			    model.labelHeight = (textHeight * labelContentArray.length) + (2 * model.labelYPadding);
+			    //Add padding for in between each label item


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

benmccann · 2018-12-13T06:18:49Z

src/types/line.js

+				            textYPosition
+				        );
+
+				        textYPosition += (view.labelFontSize + 5);


these parentheses are unnecessary

benmccann · 2018-12-13T06:23:27Z

src/types/line.js

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


this padding should probably be configurable. and perhaps the default should be something like fontSize / 3

benmccann · 2018-12-14T18:20:02Z

@aoifef I setup a gulp lint task so that you can run the style checks manually locally to speed up the review cycles. Hope this helps. The new Travis setup is currently failing with this PR and will need to be fixed before we can merge

benmccann · 2019-01-30T16:05:40Z

@aoifef just a reminder that you will need to make gulp lint pass

siemendes · 2019-02-28T09:51:27Z

Hello,
is it possible to merge the solution?
In developpement with the correction, it's perfect for me.
But i have a bug when i build my project for production with the latest version.
Thanks a lot :-)

…le-lines

benmccann · 2019-04-02T15:02:35Z

The main Chart.js repo typically takes input as an array for multiple lines instead of using \n. It'd be good to do the same here for consistency

benmccann · 2019-04-02T15:07:09Z

src/types/line.js

+			var textHeight = model.labelFontSize;
+			model.labelHeight = textHeight + (2 * model.labelYPadding);
+
+			if (model.labelContent !== null && model.labelContent.indexOf('\n') !== -1) {


This seems like it would fail if labelContent is undefined. Maybe just check model.labelContent rather than model.labelContent !== null

aoifef · 2019-04-02T15:08:28Z

The main Chart.js repo typically takes input as an array for multiple lines instead of using \n. It'd be good to do the same here for consistency

@benmccann could you provide an example of this or point me in the right direction in the Chart.js repo?

src/types/line.js

benmccann · 2019-04-02T15:11:15Z

See https://www.chartjs.org/docs/latest/configuration/tooltip.html for example and also chartjs/Chart.js#6117

aoifef · 2019-04-30T14:55:41Z

Changes applied, evidence of working functionality:

benmccann · 2019-04-30T15:01:55Z

src/types/line.js

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


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

…/chartjs-plugin-annotation into line-label-multiple-lines

mtskf · 2019-06-21T03:23:18Z

This is not working...

benmccann · 2019-06-24T23:42:56Z

@mtskf are you using the code from master or the latest release? This code hasn't been included in a release yet. If you are using the code from master, it'd be helpful to know in what way it's not working

* commit '7037eea71314613a8af83d2298241841cbc34c4f': Fix undefined reference "preserveComments" not longer available on gulp-uglify (chartjs#177) Added PLUGIN ID because missing (chartjs#173) allow multiple lines of text in the line label (chartjs#129) Chart.js should be a peerDependency Fix getting chart borders for box size setting (chartjs#152) Fix a number of lint errors in the samples Add missing .htmllintrc Lint sample html (chartjs#150) Pass the index of value datapoint to getPixelValue (chartjs#109) move configure step to draw time, to support render call (chartjs#116) Read plugin options from plugins.annotation (chartjs#130) Add Travis config Add gulp lint task (chartjs#144) Fix Dropbox url # Conflicts: # README.md # package.json

adding changes to allow multiple lines of text in the line label by u…

223d6ce

…sing \n

aoifef changed the title ~~adding changes to allow multiple lines of text in the line label by u…~~ allow multiple lines of text in the line label Sep 18, 2018

MayankVachher approved these changes Nov 15, 2018

View reviewed changes

benmccann reviewed Nov 15, 2018

View reviewed changes

src/types/line.js Outdated Show resolved Hide resolved

benmccann reviewed Nov 15, 2018

View reviewed changes

src/types/line.js Outdated Show resolved Hide resolved

benmccann reviewed Nov 15, 2018

View reviewed changes

src/types/line.js Outdated Show resolved Hide resolved

benmccann reviewed Nov 15, 2018

View reviewed changes

src/types/line.js Outdated Show resolved Hide resolved

benmccann reviewed Nov 15, 2018

View reviewed changes

src/types/line.js Outdated Show resolved Hide resolved

addressing pr comments

60b14a3

benmccann reviewed Dec 13, 2018

View reviewed changes

src/types/line.js Outdated

textYPosition

);

textYPosition += (view.labelFontSize + 5);

Copy link

Collaborator

benmccann Dec 13, 2018

Choose a reason for hiding this comment

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

these parentheses are unnecessary

benmccann reviewed Dec 13, 2018

View reviewed changes

benmccann closed this Dec 14, 2018

benmccann reopened this Dec 14, 2018

Aoife Finnegan added 2 commits April 2, 2019 15:12

Merge remote-tracking branch 'upstream/master' into line-label-multip…

523d9d6

…le-lines

fixing format issues

b973bf9

benmccann reviewed Apr 2, 2019

View reviewed changes

src/types/line.js Outdated Show resolved Hide resolved

Aoife Finnegan and others added 2 commits April 30, 2019 15:49

changes to allow use of an array instead of \n

7d4912b

Delete vcs.xml

ff53584

benmccann reviewed Apr 30, 2019

View reviewed changes

Aoife Finnegan added 2 commits April 30, 2019 16:10

changing y padding

6974e37

Merge branch 'line-label-multiple-lines' of https://github.com/aoifef…

5e5b302

…/chartjs-plugin-annotation into line-label-multiple-lines

benmccann approved these changes Apr 30, 2019

View reviewed changes

benmccann merged commit fdafa46 into chartjs:master Apr 30, 2019

kurkle added the enhancement label Oct 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

allow multiple lines of text in the line label #129

allow multiple lines of text in the line label #129

aoifef commented Jul 23, 2018

mheiduk commented Aug 23, 2018

zreese commented Sep 17, 2018

alex2wong commented Sep 27, 2018

ffoxwell commented Nov 15, 2018

benmccann commented Nov 15, 2018

simonbrunel commented Dec 12, 2018

benmccann Dec 13, 2018

benmccann Dec 13, 2018

benmccann Dec 13, 2018

benmccann Dec 13, 2018

benmccann commented Dec 14, 2018

benmccann commented Jan 30, 2019

siemendes commented Feb 28, 2019

benmccann commented Apr 2, 2019

benmccann Apr 2, 2019

aoifef commented Apr 2, 2019

benmccann commented Apr 2, 2019

aoifef commented Apr 30, 2019

benmccann Apr 30, 2019 •

edited

mtskf commented Jun 21, 2019

benmccann commented Jun 24, 2019 •

edited

allow multiple lines of text in the line label #129

allow multiple lines of text in the line label #129

Conversation

aoifef commented Jul 23, 2018

mheiduk commented Aug 23, 2018

zreese commented Sep 17, 2018

alex2wong commented Sep 27, 2018

ffoxwell commented Nov 15, 2018

benmccann commented Nov 15, 2018

simonbrunel commented Dec 12, 2018

benmccann Dec 13, 2018

Choose a reason for hiding this comment

benmccann Dec 13, 2018

Choose a reason for hiding this comment

benmccann Dec 13, 2018

Choose a reason for hiding this comment

benmccann Dec 13, 2018

Choose a reason for hiding this comment

benmccann commented Dec 14, 2018

benmccann commented Jan 30, 2019

siemendes commented Feb 28, 2019

benmccann commented Apr 2, 2019

benmccann Apr 2, 2019

Choose a reason for hiding this comment

aoifef commented Apr 2, 2019

benmccann commented Apr 2, 2019

aoifef commented Apr 30, 2019

benmccann Apr 30, 2019 • edited

Choose a reason for hiding this comment

mtskf commented Jun 21, 2019

benmccann commented Jun 24, 2019 • edited

benmccann Apr 30, 2019 •

edited

benmccann commented Jun 24, 2019 •

edited