How to set Google Charts legend width in JavaScript?

38
votes

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?

enter image description here

5
google-visualization
Could you include sample code? The example at code.google.com/apis/ajax/playground/?type=visualization shows far more text in the annotations without it being clipped. – Bernhard Hofmann
@Bernhard Hoffman: Which example are you referring to? – f.ardelian
They put way too much time into making the sample charts look good and forgot about basic features like some legend and axis options (this + integer y-axis for example)...Also, the API isn't the most intuitive one I've used. – keyser
I ended up using HighCharts - they cost a bit, but they're worth every dollar because they save you a lot of development time – f.ardelian
Thank you very much F.ardelian, i found it. – chosenOne Thabs

5 Answers

45
votes

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'}
        );
20
votes

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.

6
votes

None of the previous answers worked well for me. Setting width to less than 100% centers the plot area and leaves too much unused space on the left. Setting it to 100% is not a solution either.

What worked well - see live working fiddle - is setting the right value to accommodate the legend, then adjusting the left value eventually, for the Y axis title and labels. The plot area width will adjust automatically between these two fixed margins:

var options = {
   ...
   legend: { position: 'right' },
   chartArea: {
      right: 130,   // set this to adjust the legend width
      left: 60,     // set this eventually, to adjust the left margin
   },
   ...
};
3
votes

There is an option in legend.textStyle we can customize legend text styles inside google charts

var options = {
                legend: { textStyle: { fontSize: 78  //size of the legend 
                } }
              }
1
votes

You need to make the chart wider or your labels shorter.