fix the width of the div even if the data is minimal

Question

I want to fix the width of the chart to 100% even if the data is not available. I'm using the following properties in my js code to get the horizontal scroll and the below properties are required in my application.

"width": chart1.data.rows.length *130,
 "bar": {groupWidth: 40},

Below property is used to fix the width,height of the chart, but it is not working as i have used the code mentioned above to calculate and define the width which is required for the horizontal scrollbar display when data is more.

  chartArea:{left:20,top:0,width:'100%',height:'75%'}

Any suggestions as how to fix the width of the chart to 100% even if the data is minimal? Please find the demo here

------Edit----

when the data is less:

https://plnkr.co/edit/q0NmXQVXgmnOi3g1WcEx?p=preview - when data is less and width is set using "width": chart1.data.rows.length *130, u can see the chart area is minimized when there is not much data.

https://plnkr.co/edit/VZqEfHdgZQOEzfUnO21G?p=preview - width is set to 100%.this is what i want my chart to be like even when the data is less but if i use width:"100%", when the data is more it wont show horizontal scrollbar as shown in https://plnkr.co/edit/iIVfF4rUv0c13SLaNMkr?p=preview

when data is more:

https://plnkr.co/edit/3kZR69VMSjFcBHUaCnB9?p=preview - when data is more and width is set to 100%, horizontal scrollbar is not displayed.

https://plnkr.co/edit/iIVfF4rUv0c13SLaNMkr?p=preview - when data is more and width is set using "width": chart1.data.rows.length *130, you can notice a horizontal scrollbar down to page where you can scroll and see the data.

Answer 1

If you do not set the chart width, than it will take the width of parent element, which is 100%, as stated in docs:

One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container element, or in the chart options. If you specify the size in both locations, the chart will generally defer to the size specified in the HTML. If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.

In case your calculated, suggested width is larger than window width, than you can add it as:

var suggestedWidth = chart1.data.rows.length*130;
if( window.innerWidth<suggestedWidth ) {
  chart1.options.width = suggestedWidth;
};

See 2 examples: first and second.

Answer 2

var app = angular.module('myApp', ['googlechart']);

app.controller('myController', function ($scope) {
    var chart1 = {};
    chart1.type = "LineChart";
    chart1.displayed = false;
    chart1.data = {
        "cols": [{
            id: "month",
            label: "Month",
            type: "string"
      }, {
            id: "laptop-id",
            label: "Laptop",
            type: "number"
      }, {
            id: "desktop-id",
            label: "Desktop",
            type: "number"
      }, {
            id: "server-id",
            label: "Server",
            type: "number"
      }, {
            id: "cost-id",
            label: "Shipping",
            type: "number"
      }],
        "rows": [{
            c: [{
                v: "January"
        }, {
                v: 19,
                f: "42 items"
        }, {
                v: 12,
                f: "Ony 12 items"
        }, {
                v: 7,
                f: "7 servers"
        }, {
                v: 4
        }]
      }, {
            c: [{
                    v: "October"
          }, {
                    v: 34
          }, {
                    v: 4
          }, {
                    v: 0
          }, {
                    v: 1
          }

        ]
      }]
    };
    chart1.options = {

        "title": "Sales per month",
        "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
        "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
        "isStacked": "true",
        "fill": 20,
        focusTarget: 'category',
        "displayExactValues": true,
        "vAxis": {
            "title": "Sales unit",
            "gridlines": {
                "count": 10
            }
        },
        "hAxis": {
            "title": "Date"
        },
        /*"width": chart1.data.rows.length *130,*/
        "width": chart1.data.rows.length ? chart1.data.rows.length * 130 : 2000,
        "bar": {
            groupWidth: 40
        },
        chartArea: {
            left: 20,
            top: 0,
            width: '100%',
            height: '75%'
        }
    };
    chart1.view = {
        columns: [0, 1, 2, 3, 4]
    };
    $scope.myChart = chart1;

});

<html ng-app="myApp">

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.1.0/ng-google-chart.js"></script>
  <title>Angular-Google-Charts Example</title>
</head>

<body>
 
<div ng-controller="myController">
      <div google-chart chart="myChart"></div> 
 </div>
  
</body>

</html>