how to not let google chart width size shrink if screen size small

Question

i use google chart colum for my website and put it inside a responsive div.Its working well on large screen.If i resize the browser by drag it to become smaller the responsive overflow working well like this.

Normal screen (working) :

Smaller screen (working) :

I want the chart to be like image above which is reponsive even screen small.The problem is if i refresh the page on smaller screen the size chart will shrink and data for 2021 not showing like this (smaller screen if refresh):

I already try to set the size value with this but still not working :

  var options = {
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2021'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
      ,height: 1000
      ,width: 1000
    }
  };

here my code :

 <div class="mb-2 align-items-center overflow-auto">
    <div class="card shadow mb-4">
      <div class="card-body">
        <div class="row">
          <div id="columnchart_material" class="col-12" style="height: 500px;"></div>
        </div>
      </div> 
    </div>
  </div>

  <script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350],
    ['2018', 1030, 540, 350],
    ['2019', 1030, 540, 350],
    ['2020', 1030, 540, 350],
    ['2021', 1030, 540, 350]
  ]);

  var options = {
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2021'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
      ,height: 1000
      ,width: 1000
    }
  };

  var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}

Answer 1

i solved the problem by adding width not inside the chart but inside the options

   var options = {
    width: 1500,
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2021'
    }
  };