-
Notifications
You must be signed in to change notification settings - Fork 11.9k
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
[BUG] Chart invisible when Legend too large #3761
Comments
Hmmm, I'm not sure what the best solution is here. I almost think an HTML legend would be the way to go in this case. @chartjs/maintainers any thoughts? |
@etimberg I agree that an HTML legend would be the best approach, and it covers that "scrollable overflow." I don't think that most users will have this many legend options, so an enhancement to the core library doesn't seem necessary. |
I agree as well and that is something I was trying to accomplish, namely:
However, no matter how much I tried, I could not copy the styles and events from the Chart component into my generated legend. I saw that a previous version had a legendTemplate as well, that could maybe solve my problem (regarding the code duplication), but it is not available any more. Maybe if the |
It would be almost impossible to directly copy over the styles from the canvas since they aren't in CSS. It is possible to update the default The You could change the |
I like the html idea @zachpanz88, but this is a real issue. i use this lib on a real application, with angular-chart.
|
@itsmelion what should be the expected layout/design of these charts at this size (let's say the last one "Status" have an extra legend item)? |
@itsmelion Anyway, this chart is created dynamically. If the user chooses "All time chart" in the filters, he could have 1k Campaigns, and it will generate 1k legend's items. Maybe the best solution for this is what @Queenferno proposed, if we could take the legendCallback properties for styles and events to interact with the chart. |
I think that is important to have an option for this in the bundle of chart.js, not as outside solution. If we have a "wrap" option for the text in the legend and "max-width", the text will be automatically ajust to the width. |
I have an idea. What if Chart.js' constructor took in 2 canvases, 1 for the Chart itself, and the other for the Legend? That way, one could control the sizing and positioning of each canvas separately. For example, to solve the above problem, one could simply increase the height of the Legend canvas and wrap it with a scrollable This would also solve issue #1959 (size of Chart will not change if the height/width of the Legend changes). |
Did anyone find a solution to this as I am having the exact problem. Thanks |
I'm not expert but we could be possible to show only top 5 legends to avoid an invisible chart |
@bahiamartins yes, this can be done. A custom label generation function that returns the first 5 will work |
Using a |
I am experiencing the same problem. Any good solution for this that includes the legend's events? |
@renielDev Here is the solution I wrote: But fair warning |
Will look into it @timbauwens. Thanks |
The solution of @timbauwens looks nice, but as he mentioned it is a bit hacky (still much appreciated). Still, a more "official" solution would be nice. Like if the core could be altered in the way that @daniel-shuy proposed. |
Any updates on a solution to this issue? Custom responsive legends, (including piping in information for localization and canvas size), get very messy very quickly. These types of coding gymnastics are not generally necessary with most charting libraries. I believe solution described by @PabloMCampos would be the easiest to use, although not necessarily the easiest to develop. |
I am also having the issue, but it is much more evident for mobile devices. Any solution to this? |
Didn't think that this would be an issue for me, till my data set enlarged! The chart becomes a tiny spec on the canvas while the legend takes center stage, which beats the point of having a chart! @daniel-shuy solutions seems practical. |
How is this issue still opened? Is there no way to add a 'min-height' to the graph so it doesn't shrink? That way the container will grow. |
How are you guys handling this problem?
Is there any chance to modify canvas height by height of legend for horizontal layout? |
Expected Behavior
Imagine a Pie/Doughnut Chart with the following requirements:
It can be obvious that both the 6 generated columns with the Labels cannot fit to the div with the Chart. In my opinion, they should not.
Image presenting the Chart in a full-screen mode:
Current Behavior
When working with a Chart following the aforementioned requirements:
Image presenting the Chart in a smaller Div. Most elements are gone. All that is left are some of the Legend Labels:
Possible Solution
Add a scrollable overflow to the "box" that hosts the Legends?
Steps to Reproduce
<div class="row">
<div class="col-lg-4">
<div>
<div>
Options Example:
options="{ 'responsive': true,'maintainAspectRatio':true,'transparencyEffects':true,'dataSetBorderWidth': 2, 'legend':{ 'display': true, 'fullWidth':true, 'position': 'right', 'labels':{'boxWidth':40, 'fontSize':12, 'fontStyle':'normal', 'fontColor':'#666', 'usePointStyle':false}}, 'pallette': ['#a694ff','#a59891','#98a7ad','#ea7d7d','#80d27a','#99b4f4','#fed444','#3f3f3f','#b6696c','#417d83','#ff9750']}"
When you run it, you will see that your div will only present some of the Legend Labels. All other Labels and the Chart will be cone.
Environment
The text was updated successfully, but these errors were encountered: