Chart.js の 線グラフ scatter で線グラフにする

Chart.js の 線グラフ、線グラフのＸ軸のラベル配列に沿う data = [ 1, 2, 3, ... ] 値の配列ではなく
point 型で指定する場合、scatter で書かなければならない。
この書き方が結構わかりにくい。

     data: [ {  x: 10 ,  y:12 },  {  x: 20 ,  y:22 } . .....] 

で指定してＸ軸のラベル配列は別に指定させるのは、scatter でないとできない。

var graph = {
   datasets: [{
      label: "alpha",
      type: "line",
      showLine: true,
      lineTension: 0,
      backgroundColor: "rgba(255, 140, 0, 0.6)",
      borderColor: "rgba(255, 140, 0, 0.6)",
      borderWidth: 2,
      borderCapStyle: 'round',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "round",
      pointBorderColor: "rgba(255, 140, 0, 0.6)",
      pointBackgroundColor: "rgba(255, 140, 0, 0.6)",
      pointBorderWidth: 1,
      pointHoverRadius: 10,
      pointHoverBackgroundColor: "rgba(255, 140, 0, 0.6)",
      pointHoverBorderColor: "rgba(255, 140, 0, 0.6)",
      pointHoverBorderWidth: 10,
      pointRadius: 1,
      pointHitRadius: 10,
      fill: false,
      data: []
   },{
      label: "beta",
      type: "line",
      showLine: true,
      lineTension: 0,
      backgroundColor: "rgba(0, 100, 0, 0.6)",
      borderColor: "rgba(0, 100, 0, 0.6)",
      borderWidth: 2,
      borderCapStyle: 'round',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "round",
      pointBorderColor: "rgba(0, 100, 0, 0.6)",
      pointBackgroundColor: "rgba(0, 100, 0, 0.6)",
      pointBorderWidth: 1,
      pointHoverRadius: 10,
      pointHoverBackgroundColor: "rgba(0, 100, 0, 0.6)",
      pointHoverBorderColor: "rgba(0, 100, 0, 0.6)",
      pointHoverBorderWidth: 6,
      pointRadius: 1,
      pointHitRadius: 10,
      fill: false,
      data: []
   }]
};
var graphOptions = {
   responsive: true,
   title:{ display:true,
      text:'scatter-line sample'
   },
   chartArea: {
      backgroundColor: 'rgba(255, 255, 255, 1)'
   },
   scales: {
      xAxes: [{ display: true,
         scaleLabel: { display: true, labelString: 'scale' },
          ticks: { min: 0, max: 100, stepSize: 10 }
      }],
      yAxes: [{ display: true,
         scaleLabel: { display: true, fontSize: 22, labelString: 'Value' },
         ticks: { fontSize: 26,
               min: 0, max: 120, stepSize: 40 }
      }]
   },
   tooltips: {
      titleFontSize: 36,
      bodyFontSize: 36,
      callbacks: {
         title: function (tooltipItem, data){
            return data.datasets[tooltipItem[0].datasetIndex].label;
         },
         label: function (tooltipItem, data){
            return "scale:" + tooltipItem.xLabel + "  value:" + tooltipItem.yLabel;
         }
      }
   },
   chartArea: {
      backgroundColor: 'rgba(255, 255, 255, 1)'
   },
};
/*******************/
$(function(){
   Chart.pluginService.register({
      beforeDraw: function(c){
         if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) {
            var ctx = c.chart.ctx;
            var chartArea = c.chartArea;
            ctx.fillStyle = "rgba(240, 249, 255, 1)";
            ctx.fillRect(0, 0, c.chart.width, c.chart.height);
            ctx.save();
            ctx.fillStyle = c.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
         }
      }
   });

   Chart.defaults.global.defaultFontSize = 26;
   var multiChart = new Chart(document.getElementById("myChart").getContext('2d'), {
      type: 'scatter',
      data: graph,
      options: graphOptions
   });
   /*************************/
   graph.datasets[0].data.push({ x:10, y:31 });
   graph.datasets[0].data.push({ x:36, y:21 });
   graph.datasets[0].data.push({ x:54, y:78 });
   graph.datasets[0].data.push({ x:60, y:42 });
   graph.datasets[1].data.push({ x:20, y:21 });
   graph.datasets[1].data.push({ x:30, y:45 });
   graph.datasets[1].data.push({ x:64, y:56 });
   graph.datasets[1].data.push({ x:80, y:87 });
   /*************************/
   multiChart.update();
});

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