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, ie
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>