score:8

Accepted answer

You have to use an extension to chart.js that has data for both x and y values in the data structure. One that I found is Chart.Scatter.

The longer explanation is that by default, the labels you use in chart.js are just labels; they don't get parsed into any kind of x values.

score:0

You can use the Chart.js scatter chart type (https://www.chartjs.org/docs/latest/charts/scatter.html). Also remember to set showLine: true in the datasets options.

I found that this resulted in gaps at the start and end of the x axis. You can feed in the min and max ticks for x axis as follows:

scales: {
  xAxes: [
    {
      display: false,
      ticks: { max: maxX, min: minX }
    }
  ],
  yAxes: [
    {
      display: false
    }
  ]
}

Related Query

More Query from same tag