Chartjs-Why is my line chart using multiple lines to connect random points? (Chart.js)

This is because your first dataset is a scatter, and by default scatter charts dont draw lines between points so you either need to change the datasetType to line or add this line to the scatter dataset: showLine: true

EDIT:

Chart.js draws its points in order you provide them, the weird behaviour comes from the fact you give the points in a random order so if you want a smooth line you will need to sort the dataset first on incrementing x values and then provide it to chart.js