Timeline chart preventing vertical scroll bar and changing xAxis font family issue

[M.Erkan Çam]

Hey , i am new to google visualization api and i have been working to solve these issues for hours. 

i have div which has 500 px height and i want my timeline chart to resize itself and fit into div without scroll bars. 

The problem is that chart vertical scroll bar appears. For example when there are like 20 rows input, Vertical scroll bar appears, but when there are 2-3 rows input bottom side of chart goes up. 

other problem is that i can not change the xAxis font type  to Roboto. i have tried xAxis option but however it doesnt work with timeline chart. 

                    chart.draw(data,

                     {

                         chartArea:{left:0,top:0,width:"100%",height:"100%"},

                         tooltip: { isHtml: true },

                         colors: ['#4EB9B5', '#9DB5C0', '#7FDDD4', '#02A8F3', '#5F7C8A'],

                         height: '500',

                       

                         timeline:

                         {

                             rowLabelStyle: { fontName: 'Roboto', fontSize: 12 },

                             barLabelStyle: { fontName: 'Roboto', fontSize: 12 },

                             showBarLabels: false

                         }

                     });

                },

                error: function () {

                    alert("Error loading data! Please try again.");

                }

            });