Legend Overflow Handling
See original GitHub issueI have been using Chart.js 2 quite a lot recently and there is one feature I have seen suggested but has been overlooked. Adding overflow handling for the legend would help me out immensely. Currently I have some datasets that could have anywhere from 10 - 50 keys in the legend. I have seen solutions like those found here but would like to avoid having to separate my legend from the chart. Adding the ability to set the dimensions of the legend within the canvas object as well as what do when our labels go beyond those dimensions would be very beneficial to my projects.
legend:{
labels:{
fontStyle: "bold",
},
display: true,
position: 'right',
width: 100, //suggested
height: 200, //suggested
overflowX: hide, //suggested
overflowY: scroll, //suggested
},
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:5 (1 by maintainers)
Top Results From Across the Web
How to fix chart Legends width-height with overflow scroll in ...
You can try one thing. Try to separate the legend into an different div. now you have full control of the div you...
Read more >How is overflow handled? - Endless Legend - Games2Gether
1. Yes. setup multiple builds and swap pop between industry and something else, see the later builds go down in turns? That's because...
Read more >Myths and Legends About Integer Overflow -
Before 1.0.0-alpha, overflow was handled by wrapping, giving the result one would expect from a two's complement representation (as most modern CPUs use)....
Read more >Chart Legends width-height with overflow scroll in ChartJS
Chart Legends width-height with overflow scroll in ChartJS - Javascript Chart.js. Javascript examples for Chart.js:Legend.
Read more >Legends - Carbon Design System
Legends summarize the distinguishing visual properties such as colors or texture ... When legends exceed 30 percent of the chart, overflow the content...
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
Although we can create a custom legend, having the possibility of using the provided one and modify its height, width and overflow behaviour would be certainly easier for the user.
I would like to see this feature implemented.
You can make a custom html legend: https://www.chartjs.org/docs/latest/configuration/legend.html#html-legends