Horizontal Scroll With Vertical Axes Static In Google Charts

I am using google chart in my App and I wanted to implement scroll. I could do it by styling the container div. But the problem is that it scrolls the entire graph with the axis. H

Solution 1:

The Visualization API has a built-in control to handle chart scrolling: the ChartRangeFilter.

Solution 2:

It looks like 'overflow-x' is what you are looking for

in the script that creates the chart, be sure to add the following:

var options = {
                'title': 'Chart title',
                'hAxis': { title: 'axis title', titleTextStyle: { color: 'blue' } },
                'width': data.getNumberOfRows() * 65,
                'height': 300,
                'bar': {groupWidth: 20}
            };

this way the width will be set by the number of bars. the next thing you'll need is to set the overflow-x property:

<style type="text/css">
        #chart_div {
            overflow-x: scroll;
            width: 500px;
        }
    </style>

what will happen now, is that the chart will be 500px width, and if you'll have more data than that - you'll get a horizontal scroll bar

Hope it helps