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. With available customization options, seems it cannot be done. Any other way?

score 25 · Answer 1 · answered Nov 29 '12 at 17:07

25

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.

answered Nov 29 '12 at 17:07

Akin Williams

648
8
14

1

legend:{ position: 'bottom', maxLines: 5 }, This does not change how it is displayed unfortunately. – Jakob Alexander Eichler Aug 31 '17 at 23:43
2

See my answer: "Note that this undocumented property only works if the legend is positioned at the top..." – Akin Williams Sep 04 '17 at 10:54

score 0 · Answer 2 · answered Apr 13 '20 at 12:24

0

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%' }

answered Apr 13 '20 at 12:24

Pranav

33
1
9

score 0 · Answer 3 · answered Oct 15 '20 at 11:19

0

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.

answered Oct 15 '20 at 11:19

user1498970

69
4

How the legends on Google charts can be wrapped

3 Answers3

Linked