[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:
largechart

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:
smallchart

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

Author: Fantashit

6 thoughts on “[BUG] Chart invisible when Legend too large

  1. 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.

  2. 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).

  3. Using a legendCallback function works to create the html legend, but does anyone have a working example that also handles clicks on legend items with the same behavior as the default legend?

  4. @renielDev Here is the solution I wrote:
    Fiddle

    But fair warning
    This is a hacky solution, that probably won’t work if you have multiple datasets. I have stripped the fiddle down to the minimum, but it’s taken from production code, so there’s probably still some “noise” in it. If anything is unclear, let me know and I will try my best to explain the madness.

  5. 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.

  6. 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.

Comments are closed.