css - Google Chart in div with overflow-x: scroll results in large scroll area -

jsfiddle here.

i have multiple google charts wrap in div container overflow-x: scroll on smaller screens users can scroll see full chart.

however, scroll area becomes large (see jsfiddle) lot of white space. have tried setting width of actual chart div (chart in example) no avail.

edit:

here's code, div charts contains google charts.

<div id="charts"> <div id="chart"></div> </div> 

and css:

#charts { direction: rtl; overflow-x: scroll; overflow-y: hidden; } 

#chart has div element grandchild holding tabular chart data position: absolute; left: -10000px; on that's creating white space. wouldn't matter , graph uses property hide element off screen direction: rtl changes box model orientation.

#chart div div {     overflow: hidden; } 

or target element , switch left right:

[aria-label="a tabular representation of data in chart."] {     left: auto !important;     right: -10000px; }