[Chartjs]-How to make the chart smaller than its container

$(function() {
  var bgcolor = [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
  ];
  var commonbordercolor = [
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
  ];


  var ctx = document.getElementById("piechart").getContext('2d');
  var data = {
    width: 100,
    height: 100,
    labels: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
    datasets: [{
      label: "pie chart",
      backgroundColor: bgcolor,
      borderColor: commonbordercolor,
      borderWidth: 1,
      data: [20, 40, 30, 10, 50, 15, 10]
    }]
  };

  var options = {
    responsive: false,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          beginAtZero: true
        },
        gridLines: {
          display: true,
          color: "rgba(255,99,164,0.2)"
        }
      }],
      xAxes: [{
        ticks: {
          min: 0,
          beginAtZero: true
        },
        gridLines: {
          display: false
        }
      }]
    },
    legend: {
        display: false
    },
    layout: {
      padding: 100
    },
    zoomOutPercentage: 55,
    plugins: {
      outlabels: {
        text: '%l %p',
        color: 'black',
        stretch: 45,
        font: {
          resizable: true,
          minSize: 12,
          maxSize: 18
        }
      }
    }
  };

  var myChart = new Chart(ctx, {
    options: options,
    data: data,
    type: 'pie'

  });
})

.container,
.box1,
box2,
box3 {
  margin-bottom: 50px;
  text-align: justify;
}

.container {
  display: block;
}

.box2 {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
<div class="container">
  <div class="row box2">
    <div class="col-xl-9 pie" width="510" height="410" style="position:relative;">
      <canvas class="canvaspie" id="piechart" width="410" height="410"></canvas>
    </div>
  </div>
</div>