Google pie chart displaying vertically not horizontally when loaded by ajax

simple pie chart example from google chart displaying pie chart vertically when onclick loaded by ajax , when same code loaded in simple web page displaying horizontally.

 <script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
      legend: {'position':'none'},
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>
<div id="donutchart" style="width: 300px; height: 300px; border: 1px solid red;"></div>

The issue you're experiencing - the Google Pie Chart displaying vertically when loaded via AJAX, but horizontally when loaded directly in a simple HTML page — is typically caused by CSS transformations or container rendering issues triggered during asynchronous DOM updates.

You can use google.visualization.events.addListener() and redraw on resize.

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    legend: {'position':'none'},
  };

  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

  google.visualization.events.addListener(chart, 'ready', function () {
    window.dispatchEvent(new Event('resize'));
  });

  chart.draw(data, options);
}