Piechart size differs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
 <div id="chartContainer1" style="height: 300px; width: 100%;"></div>
 <div id="chartContainer2" style="height: 300px; width: 100%;margin-top: 10px;"></div>

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1",
    {
      legend: {
       horizontalAlign: "right", // "center" , "right"
       verticalAlign: "center",  // "top" , "bottom"
       fontSize: 15
     },
     data: [
     {
      type: "pie",
      showInLegend: true,
      dataPoints: [
        {label: "Jon", y: 230 },
        {label: "Jose", y: 245},
        {label: "Joey", y: 345},
        {label: "Trin", y: 367 },
        {label: "Mike", y: 453 },
        {label: "Hulk", y: 256 },
        {label: "Dan", y: 478},
        {label: "Nate", y: 543 },      
        {label: "Jen", y: 456 }
      ]
    }
    ]
  });
  
  var chart2 = new CanvasJS.Chart("chartContainer2",
    {
      legend: {
       horizontalAlign: "right", // "center" , "right"
       verticalAlign: "center",  // "top" , "bottom"
       fontSize: 15
     },
     data: [
     {
      type: "pie",
      showInLegend: true,
      dataPoints: [
      	{indexLabel: "Jon", y: 230 }
      ]
    }
    ]
  });


chart1.render();
chart2.render();