Chart.js - Plot line graph with X , Y coordinates

Question

I'm trying to create a simple line graph with x,y coordinates but i'm getting a blank page .

I don't want to set labels , but have them generated automatically from the x,y coordinates. I think chartjs already implements that but my syntax is wrong.

var x = new Chart(document.getElementById("myChart1"), {     type: 'line',     data: {         datasets: [{             label: "Test",             data: [{                 x: 0,                 y: 5             }, {                 x: 5,                 y: 10             }, {                 x: 8,                 y: 5             }, {                 x: 15,                 y: 0             }],         }]     },     options: {         responsive: true,     } }); 

Any idea how to fix the code above ?

Answer 1

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.