Google Charts legends overlapping

Question

I am new to Stackoverflow and google charts.

I am facing a problem in one of my project which uses google charts api, I am drawing two legends but they are overlapping on preview.

I tried various solution on stackoverflow and jsfiddle but none of them worked.

Here are some of my code snippet and output:

Configuration Object for Chart :

    var options = {
        hAxis : {
            title : xAxis,
            textStyle:{
                color: 'black',
                fontSize : '8px'
            },
            slantedText : true,
            slantedTextAngle : 90,
            titleTextStyle : {
                fontSize : '15px',
                italic : false
            },
        },
        vAxis : {
            title : yAxis,
            format:format,
            textStyle:{
                color: 'black',
                fontSize : '8px'
            },
            titleTextStyle : {
                fontSize : '15px',
                italic : false
            },
            viewWindowMode : 'explicit',
            viewWindow : {
                min : 0,
                //max: 1200000
            }
        },
        backgroundColor : 'transparent',
        interpolateNulls: false,
        width : 350,
        height : 180,
        chartArea : {
            left : 40,
            width : '45%',
            height : '45%'
        },
     legend: {
          position: 'top',
            maxLines: 3,
        },
        series : {
            0 : {
                color : line1Color,
                visibleInLegend : true,
                pointShape: 'square',
                pointSize: 10,
            },
            1 : {
                color : line2Color,
                visibleInLegend : true,
                pointShape: 'diamond',
                pointSize: 10,
            }
        }
    };

Output: https://snag.gy/Yd2qjX.jpg

Answer 1

unfortunately, there isn't an option for forcing multiple lines on the legend

I could never get the legends to overlap as in the screen shot,
instead each would be cutoff, with '...' at the end

but the only way I could get the legend text to drop to another line and not cutoff,
was by increasing the width by a rediculous amout
needed to adjust chartArea.width as well

so you might be able to continue to adjust both width and chartArea.width,
until you get the desired result

one other note, anytime you use fontSize in the chart options,
it should be a number, instead of a string, i.e.
fontSize : 8

vs.

fontSize : '8px'

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Tool - Long title could not read', 'Tool - Something to Prod Start'],
      [new Date('08/01/2015'), 0.2, 0.0],
      [new Date('09/01/2015'), 0.8, 0.0],
      [new Date('10/01/2015'), 1.0, 2.2],
      [new Date('11/01/2015'), 1.3, 1.2],
      [new Date('12/01/2015'), 1.8, 1.4],
      [new Date('01/01/2016'), 2.4, 1.5],
      [new Date('02/01/2016'), 2.5, 1.4],
      [new Date('03/01/2016'), 2.6, 1.5],
      [new Date('04/01/2016'), 2.5, 1.5],
      [new Date('05/01/2016'), 2.4, 1.6],
      [new Date('06/01/2016'), 2.3, 1.6],
      [new Date('07/01/2016'), 2.2, 1.5]
    ]);

    var options = {
        hAxis : {
            title : 'xAxis',
            format: 'MMM-yy',
            textStyle:{
                color: 'black',
                fontSize : 8
            },
            slantedText : true,
            slantedTextAngle : 90,
            titleTextStyle : {
                fontSize : 15,
                italic : false
            },
        },
        vAxis : {
            title : 'yAxis',
            format: '#,##0.0',
            textStyle:{
                color: 'black',
                fontSize : 8
            },
            titleTextStyle : {
                fontSize : 15,
                italic : false
            },
            viewWindowMode : 'explicit',
            viewWindow : {
                min : 0
            }
        },
        backgroundColor : 'transparent',
        interpolateNulls: false,
        width : 780,
        height : 180,
        chartArea : {
            left : 40,
            width : 310,
            height : '45%'
        },
        legend: {
            position: 'top',
            maxLines: 3
        },
        series : {
            0 : {
                color : '#154360',
                visibleInLegend : true,
                pointShape: 'square',
                pointSize: 10,
            },
            1 : {
                color : '#5499C7',
                visibleInLegend : true,
                pointShape: 'diamond',
                pointSize: 10,
            }
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>