The legends on my google line chart they get chopped off(on top) on the mobile browser or on a smaller screen.

How can I push the legend text down?

Example:

Please see my code below :

function DashboardGraphAppointmentGrowth(statsData) {

try {
    google.charts.load('current', {
        packages: ['line'],
        callback: function () {
            // console.log(statsData);
            var data = new google.visualization.DataTable();
            data.addColumn('string', '');
            data.addColumn('number', 'Total Appointments');
            data.addColumn('number', 'Completed Appointments');

            for (var i = 0; i < statsData.length; i++) {
                data.addRow([statsData[i].date, parseInt(statsData[i].total), parseInt(statsData[i].completedTotal)]);
            }

            var options = {
                chart: {
                    title: '',
                    subtitle: ''
                },
                colors: ['#f4b400', '#4285f4'],
                height: 350,
                legend: {
                    position: 'top', maxLines: 3, textStyle: {
                        fontSize: 11.3,
                        color: '#000000',
                    }
                },
                vAxis: {
                    viewWindow: {
                        min: 0
                    }
                }
            };

            var chart = new google.charts.Line(document.getElementById('graph_appointments_growth'));
            chart.draw(data, google.charts.Line.convertOptions(options));
        }
    });
}
catch (error) {
    console.log("Error : " + error);
}

}