Chart js Annotation label cuts off when positioned to the right
See original GitHub issueThe chart js annotation label seems to cut off the canvas when aligned to the right side of the chart. I tried adding Padding but that does not seem to work.
Here is what i mean:
Are there any configurations I can use to align the label on the right side without cutting off text?
Here is my annotation configs:
label: { backgroundColor: 'rgba(0,0,0,0)', enabled: true, content: 'Avg', position: 'right', xAdjust: -15,
Thanks!
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (1 by maintainers)
Top Results From Across the Web
chart js annotation label text is cutting of - Stack Overflow
i need to show my label text at bottom of the graph i mean outside the graph, right now for me going inside...
Read more >Label Annotations | chartjs-plugin-annotation
Label annotations are used to add contents on the chart area. This can be useful for describing values that are of interest. options...
Read more >Chart.Js - Problem With Label On The Right Hand - ADocLib
The chart js annotation label seems to cut off the canvas when aligned to the right side of the chart. I tried adding...
Read more >How to Add Custom Data Labels at Specific Position in Chart JS
With the chartjs -plugin-datalabels or the chartjs datalabels plugin you can only position the data labels a few pixel above the bar or...
Read more >How to Add Custom Annotation Line on Hover in Chart JS
How to Add Custom Annotation Line on Hover in Chart JSTo add a custom annotation line on hover in Chart JS we need...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi @sdaniel1609 & @chrisokamoto 👋,
I ran into the same issue and “solved it” (in a hacky way) by offsetting the label using
xAdjust
depending on whether it was the first or last element in the column.Here is a JsFiddle that explains what I mean: https://jsfiddle.net/Lq473vx9/
Would be great if this plugin would handle such situations! @etimberg what do you think?
Looking for a solution also, if it’s possible to put the label z-index > to graph