Chart.jsで二次元座標から折れ線グラフを生成したい

Chart.jsの折れ線グラフを使っています。
目的としては、コード中のx_arrayとy_arrayからなる折れ線グラフを作成したいと考えております。
i=0～9で、[x_array[i],y_array[i]]からなる二次元座標を結ぶ折れ線グラフの作成です。
var x_array = [1,2,3,10,17,20,21,23,25,50]
var y_array = [153,167,125,145,151,123,144,156,167,183]
ここで、x_arrayには昇順でソート済みですが、飛び飛びの値が入っています。
下記のコードでグラフを作成すると、xの要素同士の間隔を考慮せずに、等間隔に配置されてしまいます。
下記の例の最後では、(x,y)=(24,156),(25,167),(50,183)を結びたいのに、
「(24,156),(25,167)」の2点と、「(25,167),(50,183)」の2点でx軸の変化が同じなので、
実質、y_arrayに関する折れ線グラフを生成しているだけになってしまっています。
xの値を踏まえて、折れ線グラフを作成できればと考えております。

x_arrayの値を、x軸の値をラベル名としての採用ではなく、実際の値として採用して、
折れ線グラフを作成するには、どうすればよいでしょうか。
よろしくお願いいたします。

    <canvas id="myChart2"></canvas>
    <script>
    var x_array = [1,2,3,10,17,20,21,24,25,50]
    var y_array = [153,167,125,145,151,123,144,156,167,183]

    var ctx = document.getElementById("myChart2");

    var data = {
        labels: x_array,  // データ軸名→x軸ではない
        datasets: [
            {
                label: "Sleep",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgb(5,141,199)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgb(5,141,199)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: y_array,  // データ
                spanGaps: false,
            }
        ]
    };
    var myChart = new Chart(ctx, {
        type: 'line',
        data: data
        
    });
    </script>