25

With a Perl script I generate numerous Google Line Charts for 20 and more series of data at once.

The legend labels are of the form: a serial number appended by an iterating #counter.

Unfortunately, starting with #10 those counters are cut off:

enter image description here

Is there maybe a way to stop Google charts from doing that?

My quite simple chart code is below:

    var data = { ...... };

    function drawCharts() {
            for (var csv in data) {
                    var x = new google.visualization.DataTable(data[csv]);

                    var options = {
                            title: csv,
                            width: 800,
                            height: 600
                    };

                    var chart = new google.visualization.LineChart(document.getElementById(csv));
                    chart.draw(x, options);
            }
    }

    $(function() {
            google.setOnLoadCallback(drawCharts);
    });
Alexander Farber
  • 21,519
  • 75
  • 241
  • 416
  • 2
    have you tried changing the options for `ChartArea`? Try setting `ChartArea.Right` to various values and see if it still cuts off. – jmac Jun 10 '13 at 00:20

2 Answers2

42

To get full legend in your chart just add chartArea width and height as below

var options = {
              title: csv,
              width: 800,
              height: 600,
              chartArea: {  width: "50%", height: "70%" }
};

Take a look at this jqfaq.com to get a working sample

Swarna Latha
  • 1,004
  • 12
  • 21
  • 1
    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); – Kasas May 04 '16 at 16:06
  • For some reason, this chartArea command is affecting nothing for us. Here is how we are sending it. 'chartArea': {'width': '100%', 'height': '20%'} Any other ideas would be great. – Praxiteles May 26 '17 at 08:20
0

in chartArea, make width 30 percent move the graph to the center.

chartArea: { width: "30%", height: "50%" }

Chieu Luu
  • 1