How to adjust spaces between points in chart js?

I am trying to make a line chart by using chart.js. But I facing a problem. I want to control the space between points, but the chart.js makes it equal.

Here is my code:

<canvas id="myChart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js" integrity="sha512-OD9Gn6cAUQezuljS6411uRFr84pkrCtw23Hl5TYzmGyD0YcunJIPSBDzrV8EeCiFxGWWvtJOfVo5pOgB++Jsag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
var ctx = document.getElementById("myChart");

var points = [1,1,9,9.3];
var Dates = ["Dec 29th", "jan 10th", "Feb 21st", "Feb 25th"];

var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: Dates,
    datasets: [
      {
        label: "My chart",
        data: points,
        backgroundColor: "black",
        borderColor: "blue",
        borderWidth: 3,
        fill: false,
        lineTension: 0.4,
      }
    ]
  },
  
  options: {
    legend: {display: false},
    scales: {
      yAxes:[{
        ticks: {
            min:1,
            max: 9.9,
                  
            callback: function(value, index, values) {
                return '$' + value;
            }
        }
      }],
      
    },
     elements: {
        point:{
            radius: 0
        }
    }
  }
});
</script>

Here is the result of my code:
enter image description here

But I want the big space in middle like this:
enter image description here

How can I make the big space between point 3 and point4, please?