How to make a line chart with unequally spaced x values

Making a scatter plot with vue-chartjs <Scatter> was perfect:

Now the user asks for the same chart but with points connected. So I tried to change <Scatter> to <Line>. But the result, with the same data description does not work:

Seems that data described as {x, y} does not work for line, instead it needs the usual labels plus data as an array of values. Here is the data:

const data = {
  "datasets": [
    {
      "label": "Diffraction",
      "borderColor": "#f87979",
      "backgroundColor": "#f87979",
      "data": [
        {
          "x": 28.46772426,
          "y": 100
        },
        {
          "x": 47.34657519,
          "y": 66.64746966
        },
        {
          "x": 56.17571327,
          "y": 39.58448396
        },
        {
          "x": 69.19895076,
          "y": 10.71251618
        },
        {
          "x": 76.45494946,
          "y": 16.34081066
        },
        {
          "x": 88.1268895,
          "y": 23.50766372
        }
      ]
    }
  ]
}

Any way to make the scatterplot with the points connected by lines? Somewhere I have seen mentioned showLine, but I don't know if it exists and where should go. Thanks for your help!

From the documentation:

The scatter chart supports all the same properties as the line chart. By default, the scatter chart will override the showLine property of the line chart to false.

And line chart has showLine enabled by default in Dataset Properties. Source

This can be done as shown here:

datasets: [
  {
    label: "Diffraction",
    borderColor: "#f87979",
    backgroundColor: "#f87979",
    showLine: true, // Enable lines between points
    data: [...]
  }
]