Google chart - legend

Question

I would like to change my legend, I must have remove pagging and put all tittles in one or two rows. And i would like to change icon.

It's look like this now

I would like something like this

I put scrollArrows: 'none' but it doesn't work. This is my code in controller:

var optionsMobile = {
width: '100%',
height: '100%',
pointSize: 5,
series: {
    pointShape: 'circle'
},
chartArea: {
    width: '80%',
    height: '70%'
},
legend: {
    position: 'bottom',
    textStyle: {
        color: 'white'
    },
    pagingTextStyle: { color: '#666' },
    scrollArrows: 'none'
},
backgroundColor: 'transparent',
titleTextStyle: {
    color: 'white',
    height: "40px"
},
hAxis: {
    textStyle: {
        color: 'white'
    }
},
vAxis: {
    textStyle: {
        color: 'white'
    }
},
};

Answer 1

according to the configuration options ...

Set legend.maxLines to a number greater than one to add lines to your legend.
This option currently works only with legend.position: 'top'
Note: The exact logic used to determine the actual number of lines rendered is still in flux.

var options = {
  legend: {
    maxLines: 2,
    position: 'top'
  }
};

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['x', 'NYCLS 2016 Boys', 'NYCLS 2016 Girls', 'NYCLS 2017 Boys', 'NYCLS 2017 Girls'], [1, 10, 15, 20, 25], [2, 12, 18, 24, 30], [3, 14, 21, 28, 35], [4, 16, 24, 32, 40] ]); var options = { legend: { maxLines: 2, position: 'top' }, width: 360 }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); });

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