How to set Google Charts legend width in JavaScript?
Asked Answered
G

5

40

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

Ganoid answered 29/7, 2011 at 7:35 Comment(7)
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.Cystocele
@Bernhard Hoffman: Which example are you referring to?Ganoid
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.Livestock
I ended up using HighCharts - they cost a bit, but they're worth every dollar because they save you a lot of development timeGanoid
Hi there. I'm looking for a graph that looks like the one shown in the image. Where can i find it ? This link doesn't have curved line chart with dotted points : developers.google.com/chart/interactive/docs/gallery/linechartScanlan
@chosenOneThabs: developers.google.com/chart/interactive/docs/pointsGanoid
Thank you very much F.ardelian, i found it.Scanlan
O
47

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'}
        );
Overshine answered 29/7, 2011 at 8:48 Comment(5)
I've found this work-around myself. I hoped for a property which could be used to set the legend width. If there won't be any answers over the weekend, I'll mark this one as correct.Ganoid
The legend seems to be included in the chart area. Making the chart area smaller leaves even less room for the legend.Williamsen
The config options for line chart say that chartArea should represent where the chart itself is drawn excluding axis and legends, but I could be misinterpreting this. The code playground sample seems to work as expected for me. What output are you noticing?Overshine
I adjusted with chartArea: {width: '75%'}Orthotropous
To get the chart to take up the full space, you may need to set chartArea.left. For example, to give the legend approximately 15% chartArea: {left:"5%", width:"80%"} Note: the vAxis labels aren't included in the chartArea so make sure you give enough space for that textGesso
S
21

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.

Sliding answered 24/1, 2012 at 17:49 Comment(0)
B
7

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
   },
   ...
};
Boles answered 16/7, 2017 at 19:36 Comment(0)
L
3

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 
                } }
              }
Loricate answered 1/12, 2016 at 9:21 Comment(1)
The legend.textStyle property doesn't provide a solution to the question. See here: developers.google.com/chart/interactive/docs/gallery/piechartGanoid
S
1

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

Simplicity answered 29/7, 2011 at 7:47 Comment(2)
Yeah... I thought of that, but I've made my chart 1000px wide (totally unacceptable) but the labels still don't fit.Ganoid
Might also help if he made the Y-axis values smaller. Use kb/sec or mb/sec.Cystocele

© 2022 - 2024 — McMap. All rights reserved.