[FEATURE] Text wrap long legend text
See original GitHub issueMy ChartJs legend text is overflowing in the same line when the text is too long. Is there any parameter that I can use to enable text-wrap.
Expected Behavior
It will be nice to have something like the following, if the width is exceeding the set value. It will be auto-wrapped.
legend: {
itemStyle: {
width: 90 // or whatever, auto-wrap
},
}
Current Behavior
Legend text is overflowing in the same line when the text is too long
Possible Solution
As suggested above
Context
While assigning a long text for legend
Environment
- Chart.js version: 2.3.0
- Browser name and version: All
Issue Analytics
- State:
- Created 7 years ago
- Reactions:28
- Comments:9 (1 by maintainers)
Top Results From Across the Web
Format text in a legend—ArcGIS Pro | Documentation
You can wrap the legend item labels, the legend item descriptions, or both. Word wrapping is enabled at the legend level, so it...
Read more >1.249 FAQ-1040 How to wrap legend text into multiple lines?
Right click legend, axis title or text object and choose Properties from context menu. On Frame tab, check Wrap Text, Adjust Height checkbox....
Read more >How to wrap legend text in ggplot? - Stack Overflow
You could wrap your text using guide_legend with two rows and change size of text in legend.text . You can use this code:...
Read more >Text Wrapping For Long X-Axis Labels & Legend Sorting In ...
Text Wrapping For Long X-Axis Labels & Legend Sorting In Stacked Charts - Sisense Support Knowledge Base.
Read more >Idea: Formatting legends: wrapping texts - Tableau Community
When legends have categories that are very long (lots of words), ... legend longer but I think it would be a great feature...
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 Free
Top 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

I read other articles and all concludes that you need to remove native chart.js legend and replace by another html div to have multiple line legends. I think that is important to have an option for this in the bundle of chart.js, not as outside solution
@nanospeck the legend code is in https://github.com/chartjs/Chart.js/blob/master/src/core/core.legend.js
Off the top of my head, I’m not sure what the best thing to start with is. You’d need changes to
fitwhich measures the size of the legend and also changes to the drawing code