Remove space in chart.js

I am making line chart using chart js and here I would like to have a line alone without grid lines, axes lines and labels.

I have removed everything using the configurations but I am getting more space at the bottom of the chart.

Also the left side and top of points has been cut (only half circle is visible) and not displayed correctly.

var ctx = document.getElementById('myChart').getContext('2d');

var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#80b6f4');
gradientStroke.addColorStop(1, '#f49080');

var gradientFill = ctx.createLinearGradient(500, 0, 100, 0);
gradientFill.addColorStop(0, 'rgba(128, 182, 244, 0.6)');
gradientFill.addColorStop(1, 'rgba(244, 144, 128, 0.6)');

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL'],
    datasets: [
      {
        label: 'Data',
        borderColor: gradientStroke,
        pointBorderColor: gradientStroke,
        pointBackgroundColor: gradientStroke,
        pointHoverBackgroundColor: gradientStroke,
        pointHoverBorderColor: gradientStroke,
        pointBorderWidth: 10,
        pointHoverRadius: 10,
        pointHoverBorderWidth: 1,
        pointRadius: 3,
        fill: false,
        backgroundColor: gradientFill,
        borderWidth: 4,
        data: [100, 120, 150],
      },
    ],
  },
  options: {
    legend: {
      display: false,
    },
    plugins: {
      datalabels: {
        display: false,
      },
    },
    layout: {
      padding: {
        bottom: -20,
      },
    },
    scales: {
      yAxes: [
        {
          ticks: {
            fontColor: 'rgba(0,0,0,0.5)',
            fontStyle: 'bold',
            beginAtZero: true,
            maxTicksLimit: 5,
            display: false,
          },
          gridLines: {
            drawTicks: false,
            display: false,
            tickMarkLength: 0,
          },
          display: false,
        },
      ],
      xAxes: [
        {
          gridLines: {
            zeroLineColor: 'transparent',
            display: false,
            tickMarkLength: 0,
          },
          ticks: {
            fontColor: 'rgba(0,0,0,0.5)',
            fontStyle: 'bold',
            display: false,
          },
          display: false,
        },
      ],
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>


<div class="chart-container">
 <canvas id="myChart"></canvas>
</div>

Could you please help me to resolve,

-> Removing of space at the bottom

-> Make the graph to fit in a size so that the left , top edges are visible in proper.

Thanks in advance.