How to set Google Charts legend width in JavaScript?

Question

I am generating this Google Line Chart using the Google JS API. As you can see, the labels are very narrow. How do I make it so that the whole label text is visible?

Answer 1

Here are some samples based on the google code playground line charts. Adjusting the chartArea width option gives more space for labels:

new google.visualization.LineChart(document.getElementById('visualization')).     draw(data, {curveType: "function",                 width: 500, height: 400,                 vAxis: {maxValue: 10},                 chartArea: {width: '50%'}}         ); 

If it's an option, you could also position the labels beneath the chart, which gives considerably more space:

new google.visualization.LineChart(document.getElementById('visualization')).     draw(data, {curveType: "function",                 width: 500, height: 400,                 vAxis: {maxValue: 10},                 legend: 'bottom'}         ); 

Answer 2

Expanding the chartArea option to a width of 100% solved the problem for me. Contrary to the documentation, the chartArea does include the legend. I used a PieChart but the same option is available for the LineChart.

var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}}; var chart = new google.visualization.PieChart(document.getElementById(chartDiv)); chart.draw(data,options); 

Reference.