-
Notifications
You must be signed in to change notification settings - Fork 373
Add Label Badge to Line Chart. #12
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.
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
Conversation
Fixes an inconsistency between the "configuration" section and the "line annotations" section, where config section had value in single quotes and line annotation section has it as a number.
… doesn't overlap data.
Made it so the badge is drawn conditionally, so that if you don't have a label, it doesn't show up, to avoid an null label badge. Added a todo comment about what I would like to do with this eventually.
| }, | ||
|
|
||
| afterDraw: function(chartInstance, easingDecimal) { | ||
| beforeDraw: function(chartInstance, easingDecimal) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
probably should be beforeDatasetsDraw per my comment in the other issue
| if (options.label) { | ||
| //draw the background of the badge. | ||
| ctx.fillStyle = 'white'; | ||
| ctx.fillRect((chartArea.right / 2), pixel - 5, 35, 15); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry that this took a while. I went to merge this and do some testing and I noticed this is incorrect. The width of the fill rect should be the width of the text. The text can be measured using ctx.measureText. To use this effectively, the font should be configurable and would need to be set before calling measureText.
The height of the rect would be the font size in px.
|
It doesn't appear that this works correctly with vertical lines yet. |
Originally based on chartjs#12. Added an optional Label option to Line Annotation. Updated the documentation to display this. Also added a sample showing how it can work.
|
I've added a follow-up to this pull request that addresses the configurability issues, and the compatibility with vertical lines: #31 |
Originally based on chartjs#12. Added an optional Label option to Line Annotation. Updated the documentation to display this. Also added a sample showing how it can work.
Originally based on chartjs#12. Added an optional Label option to Line Annotation. Updated the documentation to display this. Also added a sample showing how it can work.
* Added tooltip label to line chart Originally based on #12. Added an optional Label option to Line Annotation. Updated the documentation to display this. Also added a sample showing how it can work. * Fixed calculations as per comments Moved rendering calculations to lineUpdate function, also fixed a minor reference bug that prevented animations from working at all. * Fixed font bug introduced by last commit * Fixed sample post-update
Added an optional Label option to Line Annotation.
Updated the documentation to display this.