css code to remove the unnecessary white space

When horizontal scrolling is kept by default from right hand side to left hand side, i noticed a white space on the left hand side which is to be removed. Issue is could not able to remove the white space shown on the left hand side when scrolling from right to left side. Any suggestions would be helpful.

Demo link :
http://jsfiddle.net/3xa69njt/

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Adult', 'Child','Infant', 'Senior'],
          ['2004',  11,      14, 2, 9],
          ['2005',  12,      14, 2, 9],
          ['2004',  13,      14, 2, 9],
          ['2005',  14,      14, 2, 9],
          ['2004',  15,      14, 2, 9],
          ['2005',  11,      14, 2, 9],
          ['2004',  12,      14, 2, 9],
          ['2005',  13,      14, 2, 9],
          ['2004',  14,      14, 2, 9],
          ['2005',  15,      14, 2, 9],
          ['2004',  11,      14, 2, 9],
          ['2005',  12,      14, 2, 9],
          ['2004',  13,      14, 2, 9],
          ['2005',  14,      14, 2, 9],
          ['2004',  15,      14, 2, 9],
          ['2005',  11,      14, 2, 9],
          ['2004',  12,      14, 2, 9],
          ['2005',  13,      14, 2, 9],
          ['2004',  14,      14, 2, 9],
          ['2005',  15,      14, 2, 9],
          ['2004',  11,      14, 2, 9],
          ['2005',  12,      14, 2, 9],
          ['2004',  13,      14, 2, 9],
          ['2005',  14,      14, 2, 9]
        
          
        ]);

        var options = {            
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
          width: data.getNumberOfRows() * 130,
          bar: {groupWidth: 90},
          chartArea: {left:60, width:'94%'} 
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
#chart_div {
 overflow-x: auto; 
 overflow-y: hidden;     
  direction:rtl;
height:500px;
        
}
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <div id="chart_div"></div>

Tried using margin-left : 0px;left:0px; but of no luck.

–Edited–
As mentioned i want the scrollbar to be scrolled from right to left direction, that is the reason for using direction:rtl.

Use display:inline-block; It will remove the space

like below

#chart_div {
overflow-x: auto; 
overflow-y: hidden;     
direction:rtl;
height:500px;
display:inline-block;       
}

Working fiddle

Just remove direction:rtl; from your CSS code and it will work fine.

here is working jsfiddle http://jsfiddle.net/rhulkashyap/kjwhnx1q/3/

CSS code:

#chart_div {
    overflow-x: auto;
    overflow-y: hidden;
    height: 500px;
}

Am not sure, why do you need direction here. It works fine when removing it.

Here is the fiddle working fine.

Check on this reference to know more about direction property.

  [1]: http://jsfiddle.net/3xa69njt/2/
<style>
#chart_div {
 overflow-x: auto;
 overflow-y: hidden;
 direction: rtl;
 height: 500px;
 display: inline-block;
  margin-left: -20px;
 }
</style>