How the legends on Google charts can be wrapped

Question

I need the legends of Google chart to get wrapped (comes in new line) automatically if it exceeds container area. I don\'t want scroll button as it is not enough convenient. Wi

Answer 1

with the maxLines property for the legends, chartArea with specific set of values can help in rendering the display.

legend: { position: "top", alignment: "start", maxLines: 2 },
chartArea: {top:50,bottom:30,right:0,left:50, 'width': '100%' }

Answer 2

Use the maxLines property for the legend. i.e.:

options.legend = {position: 'top', maxLines: 5};

Note that this undocumented property only works if the legend is positioned at the top and there is enough vertical space to render both the chart and multi-line legend.

Answer 3

I did a lot of testing of this and it seems that you need to have chartArea width and height set to 'auto'. Still not perfect but sort of OK.