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.


You can use the Chart.js scatter chart type ( 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