Chart.js: [FEATURE] Graph gets squished by legend

[AppDevMichael]

Hello all,

So I found a 'feature' the graph gets squished by the legend.

What should happen is that the graph should get pushed down and the size of the graph stays the same without having to put the legend in a separate container.

Instead of the graph being pushed down the legend just pushes down the top of the graph and the bottom stays in the same position.

The height of the graph(excluding the legend) should be able to be set in the options.

To reproduce, add data sets and and then you will see.

I am using it to show lot's of data sets that are added and removed in real time.

Thanks in advance. 😃

Chart.js version: 2.7.2
Browser name and version: Firefox 60.0.2
Link to your project: Clicky!

Before:

After:

[jogster]

I had the same problem with large number of series. There is a simple solution, put legend at bottom.

legend: {
          display: true,
          position: "bottom",
          labels: {
            //fontFamily: "Comic Sans MS",
            boxWidth: 10 <- reduces box size as you have so many
          },

Or create a legend in a separate <div></div> and get chartjs to use that:

document.getElementById('chart-legends').innerHTML = myChart.generateLegend();

(full example here: https://stackoverflow.com/questions/37005297/custom-legend-with-chartjs-v2-0)

[AppDevMichael]

I meant that there should be a new option without having to put it in another area.

BTW putting the legend at the bottom doesn't work that just is the same but upside down. :no_mouth:

[Hedva]

Is it a bug? I mean, in your code you set a specific size for the canvas (150px). And the canvas stays 150px in height. So it works like it is supposed to be. Or am I missing something?

[AppDevMichael]

Is it a bug? I mean, in your code you set a specific size for the canvas (150px). And the canvas stays 150px in height. So it works like it is supposed to be. Or am I missing something?

That was an accident, it still happens without that, look at the codepen now.

[etimberg]

This happens because Chart.js does not resize the canvas based on the contents. In general, we just use what is available. Solutions are: make the canvas taller or create your own legend in HTML rather than using the canvas one

[fulldecent]

I don't think this is a bug or should be fixed.

Instead, the user should recalculate the height and set it appropriately.