[BUG] Chart invisible when Legend too large

Expected Behavior

Imagine a Pie/Doughnut Chart with the following requirements:

1. It has a Dataset of 100 Products
2. Each Product is represented by a Legend Label (thus, 100 labels)
3. The Chart resides within a medium div (say “col-lg-4” of Bootstrap)

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:

1. The div of the chart (canvas) shows some of the Legend Labels (say the 60 last ones)
2. The other Labels are hidden, rendered outside the canvas
3. The Chart is nowhere to be seen, probably thrown out by the Labels

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

1. Create a medium div (any size will do, as long as it’s not a full-screen one) <div class="row"> <div class="col-lg-4"> <div> <div>
2. In the “col-lg-4” div, place a canvas for your Chart. Make it :

• Type = Pie/Doughnut
• Responsive = true
• Fullwidth = true (although “false” has the exact same behavior)
• Dataset = any array holding 100+ elements (e.g. array of {name, value})
• Labels = the “name” values of your array (so that you will have 100 labels) 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

• Chart.js version:2.2.1
• Browser name and version: Chrome & Mozilla

[daniel-shuy]

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 <div> (with overflow: scroll;), without affecting the Chart canvas.

This would also solve issue #1959 (size of Chart will not change if the height/width of the Legend changes).

[adriglib]

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.