Chart.js: Many lengend take all space v2.0 Beta, pie is too small

Created on 1 Feb 2016 · 5Comments · Source: chartjs/Chart.js

In the v2.0 Beta, when I have many lengends, I can't see the pie chart when I resize or in a mobile. I tried to set Chart.defaults.global.legend.fullWidth to false, but same result.

chartjs

I think the legend should not take the place of the pie. Or is there a setting that is not in the doc ?

You can try to resize : http://jsbin.com/werifuyeyo/edit

Source

Garric15

👍2

Most helpful comment

Sorry but this is not a "great" solution. The legend should induce some extra space bellow the chart just as one may have used his own HTML rendered legend.
The same issue may appear with a very long title.

darkengines on 9 Sep 2016

👍11

All 5 comments

Some possible solutions

create your own HTML legend and disable the on-canvas legend
Set a smaller font for the legend

etimberg on 1 Feb 2016

Had recently same problem (https://github.com/nnnick/Chart.js/issues/1933)
Solved by disabling the legend for small screens

window.chart1.options.legend.display=(document.getElementById("canvas1").height >250);
window.chart1.update();

Dergonic on 2 Feb 2016

Closing since there is a great solution from @Dergonic

etimberg on 27 Feb 2016

darkengines on 9 Sep 2016

👍11

Helllo,
You have to play with he aspect ratio of the chart vs. legend. Like this:
Chart.defaults.pie.aspectRatio = 1;
Or
Chart.defaults.global.maintainAspectRatio = false;
One of this statements should do the trick.
JJ