javascript - Google Charts legends overlapping -

i new stackoverflow , google charts.

i facing problem in 1 of project uses google charts api, drawing 2 legends overlapping on preview.

i tried various solution on stackoverflow , jsfiddle none of them worked.

here of code snippet , output:

configuration object 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

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

i never legends overlap in screen shot,
instead each cutoff, '...' @ end

but way legend text drop line , not cutoff,
increasing width rediculous amout
needed adjust chartarea.width

so might able continue adjust both width , chartarea.width,
until desired result

one other note, anytime use fontsize in chart options,
should number, instead of 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 not read', 'tool - 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>