CODEWITHSUNDEEP
jqueryhtmlcssgoogle-visualization
Adidev
Adidev

Reputation: 343

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. How to scroll horizontally only the chart area and keep the vertical axis static?

Upvotes: 1

Views: 9502

Answers (2)

YuriG
YuriG

Reputation: 368

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

Upvotes: 0

asgallant
asgallant

Reputation: 26340

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

Upvotes: 3

Related Questions