Issue when using ticks option on h-axis: google charts

Question

I am using google chart's combo stacked bar. I want to display explicit values for h-axis, so I used ticks option. But, after using this option, my graph is displaying all bar values at once along the h-axis. But, I want to limit the bars to let's say 5 at a time and display the rest dynamically by sliding the charRangeFilter. The bars are almost appearing as straight lines when I use ticks option as shown in the image. Could some help me in resolving this issue? Any help is highly appreciated

Below is the code for the chart options

let hTicks = new  Array<Date>(); // I already populated this array with Dates

let chart = new google.visualization.ChartWrapper({     
                'chartType': 'ComboChart',     
                'containerId': 'chartRangeFilter_chart_div',      
                'options': { . 
                    // Use the same chart area width as the control for .  axis alignment.  
                    'width': '100%',      
                    'height': '100%',      
                    'hAxis': { 'title': 'DATES', 'gridlines': { 'color': 'transparent' }, 'ticks': hTicks, 'slantedText': true, 'slantedTextAngle': hTicks.length <= 10 ? 45 : 90 },      
                    'legend': 'none',      
                    'vAxis': { 'title': 'CABINS', 'viewWindow': { 'min': 0, 'max': (Number(cabinTotal) * 1.5) } },      
                    'seriesType': 'bars',      
                    'chartArea': { 'height': '50%', 'width': '85%' },      
                    'bar': { 'groupWidth': '15%' },      
                    'series': { 4: { 'type': 'line' } },      
                    'isStacked': true,      
                    'colors': ['#95d631', '#d7d7d7', '#f44336',       '#00bcd4', '#ffc107']      
                }      

Below are the charts

Chart with Tick option Chart Without Tick option

Answer 1

Solved by updating the ticks dynamically as the user slides the chartFilter