question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[FEATURE] Text wrap long legend text

See original GitHub issue

My 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:closed
  • Created 7 years ago
  • Reactions:28
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

13reactions
PabloMCamposcommented, Mar 22, 2017

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

2reactions
etimbergcommented, Nov 25, 2016

@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 fit which measures the size of the legend and also changes to the drawing code

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found