[Chartjs]-Chart.js – Plot line graph with X , Y coordinates

by

29👍

✅

I believe, what you are looking for, is a scatter graph, not line.

var x = new Chart(document.getElementById("myChart1"), {
   type: 'scatter',
   data: {
      datasets: [{
         label: "Test",
         data: [{
            x: 0,
            y: 5
         }, {
            x: 5,
            y: 10
         }, {
            x: 8,
            y: 5
         }, {
            x: 15,
            y: 0
         }],
      }]
   },
   options: {
      responsive: true
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart1"></canvas>

Refer here, to learn more about scatter chart.

1👍

my fresh answer:
the x values should be strings.
transform your data this way:

data = data.map(
    v=>({y:v.y,x:''+v.x}));

i found it by chance.
the labels array isn’t needed.

to use the numeric values of x,
and arrange the labels and points according to their numeric values,
you can use the linear scale type
for the x-axis as follows:

options: {
  scales: {
    x: {
      type: 'linear',
    },
  },
}

in this case, the mapping of the function above is not needed.

Leave a comment